10

Dendrogramの例 ( source )のようなツリー ダイアグラムが与えられた場合、エッジにどのようにラベルを付けますか? エッジを描画する JavaScript コードは、次の行のようになります。

var link = vis.selectAll("path.link")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);
4

1 に答える 1

13

D3 の作成者である Mike Bostock は、次の解決策を提供してくれました。g.link のスタイルを定義します。g.node のスタイルをコピーしただけです。次に、「var link =....」コードを次のコードに置き換えました。x 関数と y 関数は、ラベルをパスの中央に配置します。

var linkg = vis.selectAll("g.link")
    .data(cluster.links(nodes))
    .enter().append("g")
    .attr("class", "link");

linkg.append("path")
    .attr("class", "link")
    .attr("d", diagonal);

linkg.append("text")
    .attr("x", function(d) { return (d.source.y + d.target.y) / 2; })
    .attr("y", function(d) { return (d.source.x + d.target.x) / 2; })
    .attr("text-anchor", "middle")
    .text(function(d) {
        return "edgeLabel";
    });

テキスト関数は、理想的には、各エッジに固有のラベルを提供する必要があります。データの準備中にオブジェクトにエッジの名前を入力したので、テキスト関数は次のようになります。

    .text(function(d) {
        var key = d.source.name + ":" + d.target.name;
        return edgeNames[key];
    });
于 2012-05-31T21:33:08.507 に答える