d3エッジラベリングは可能ですか？

Question

d3を使用してグラフにエッジラベルを付けることはできますか？私は例といくつかのドキュメントを見てきましたが、どこでノードのラベル付けが可能かを見ることができますが、エッジラベルはどこにでも明示的には記載されていません。

Answer 1

I

• は
• 、すべてのエッジと一緒にpathを追加エッジに沿ってパスを参照しているtextpathにそのテキストバインドエッジ
• にtextを追加

この例では、上のアイデア：http://bl.ocks.org/jhb/5955887

Answer 2

短い答えは「はい」ですが、明示的なサポートはありません。自分でラベルの位置を決めなければなりません。これを行う1つの方法は、開始ノードにラベルを付け、それをターゲットノードまでの距離の半分だけでなく、ラインと重なるのを防ぐためにオフセットすることです。より精巧なエッジ（例えば、曲線）については、より困難になる。

Answer 3

私はパスオプションでテキストを試しましたが、それはかなり関わっていて、私が欲しかった外観にはなりませんでした。残念ながら、私はローカルのgitリポジトリにチェックインしませんでした。これは私のEclipseの歴史に由来します（Eclipse開発者に感謝します）。このコードスニペットを独自のデータ構造に変更する必要がありますが、私はそれが何らかの助けになることを願っています。具体的には、linesの値にidの値を加算し、xlink:hrefという属性を使用してパーセンテージの値で再利用することに注意してください。また、textpathにtspanを追加して、テキストを数ピクセル下に移動して、パス上に表示されるようにしました。他の人々の例次の

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