Ist d3 Kantenbeschriftung möglich?

Question

Ist es möglich, Kantenetiketten in einem Graphen mit d3 zu verwenden? Ich habe mir die Beispiele und einige Dokumentationen angeschaut, und ich kann sehen, wo Knotenbeschriftung möglich ist, aber die Kantenbeschriftung wird nirgends explizit erwähnt (das kann ich finden).

Answer 1

Nach anderen Völkern Beispielen I

• ein path neben jeder Kante hinzufügen,
• hinzuzufügen text zu den Kanten
• binden, den Text in ein textpath die den Weg entlang der Kante verweist

Dieses Beispiel verwendet th e über Ideen: http://bl.ocks.org/jhb/5955887

Answer 2

Die kurze Antwort ist "Ja", aber es gibt keine ausdrückliche Unterstützung dafür. Sie müssen die Position des Etiketts selbst bestimmen. Eine Möglichkeit, dies zu tun, wäre, das Etikett an den Startknoten anzuhängen und es um die Hälfte der Entfernung zum Zielknoten zu übersetzen, zuzüglich eines gewissen Versatzes, um zu verhindern, dass es die Linie überlappt. Für kompliziertere Kanten (z.B. Kurven) wäre es schwieriger.

Answer 3

Ich habe den Text auf einer Pfadoption versucht, aber es ist ziemlich beteiligt und führte nicht zu dem Aussehen, das ich wollte. Leider habe ich es nicht in das lokale Git-Repository eingecheckt. Dies kommt aus meiner Eclipse-Geschichte (Danke Eclipse-Entwickler). Sie müssen dieses Code-Snippet in Ihre eigene Datenstruktur ändern, aber ich hoffe, es hilft Ihnen dabei. Beachten Sie insbesondere, dass Sie den Wert id zur lines-Auswahl hinzufügen und dann in der Prozentauswahl mit dem Attribut xlink:href erneut verwenden. Außerdem habe ich eine tspan in der textpath angefügt, um den Text um ein paar Pixel nach unten zu verschieben, so dass er über dem Pfad statt auf ihm erscheint.

 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); 
      }); 
    }