¿Es posible el etiquetado de bordes d3?

Question

¿Es posible tener etiquetas de borde en un gráfico usando d3? He revisado los ejemplos y parte de la documentación, y puedo ver dónde es posible el etiquetado de nodos, pero el etiquetado de bordes no se menciona explícitamente en ninguna parte (que puedo encontrar).

Answer 1

siguientes ejemplos de pueblos que

• añadir un path junto a cada arista,
• suman text a los bordes
• unen ese texto a un textpath que se hace referencia a la trayectoria a lo largo del borde

Este ejemplo está utilizando th e ideas anteriores: http://bl.ocks.org/jhb/5955887

Answer 2

La respuesta breve es "sí", pero no hay soporte explícito para ello. Tendrá que determinar la posición de la etiqueta usted mismo. Una forma de hacerlo sería adjuntar la etiqueta al nodo de inicio y traducirla a la mitad de la distancia al nodo de destino, más algún desplazamiento para evitar que se solape con la línea. Para bordes más elaborados (por ejemplo, curvas) sería más difícil.

Answer 3

Probé el texto en una opción de ruta, pero es bastante complicado y no dio como resultado la apariencia que quería. Desafortunadamente, no lo registré en el repositorio git local. Esto viene de mi historia de Eclipse (gracias a los desarrolladores de Eclipse). Tendrá que cambiar este fragmento de código a su propia estructura de datos, pero espero que sea de alguna ayuda. En particular, observe la adición del valor id a la selección lines y luego reutilícelo en la selección de porcentajes mediante el atributo xlink:href. Además, agregué un tspan en el textpath para mover el texto hacia abajo un par de píxeles para que aparezca sobre la ruta en lugar de sobre ella.

 function drawLines(links) { 
     var diagonal = d3.svg.diagonal(); 
     var format = d3.format(".1%"); 
     var linkKey = function(l) {return l.target.key; }; 
     var lines = linesGroup.selectAll("path").data(links, linkKey); 
     lines.enter() 
      .append("path") 
      .on("mouseover", select) 
      .on("mouseout", unselect) 
      .attr("d", diagonal) 
      .attr("id", function (l) { return "interaction-path-target-" + l.target.key; }) 
      .style("stroke-width", 0.000001); 
     lines.exit() 
      .transition().duration(500) 
      .style("stroke-width", 0.000001) 
      .remove(); 

     lines.transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .style("stroke-width", function(d) { return d.weight == 0 ? 0.000001 : d.weight/1000; }) 
      .attr("d", diagonal); 

     var percentages = linesGroup.selectAll("text").data(links, linkKey); 
     percentages.enter() 
      .append("text") 
      .attr("opacity", 1) 
      .append("svg:textPath") 
      .attr("startOffset", "70%") 
      .attr("xlink:href", 
        function(l) { 
         return "#interaction-path-target-" + l.target.key; 
        }) 
      .append("svg:tspan") 
      .attr("dy", 3) 
      .attr("class", "percentageText") 
     percentages.exit() 
      .transition().duration(500) 
      .attr("opacity", 0) 
      .remove(); 
     percentages 
      .transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .attr("opacity", 1); 

     percentages.select(".percentageText").text(function(d) { 
       var newvalue = d.weight ? 
        d.incomming ? percentageIn(d.weight) : percentageOut(d.weight) : 0; 
       return format(newvalue); 
      }); 
    }