7

私は D3 を学び始めたばかりで、現在この例を理解するために取り組んでいます。

グラフの各ノードの横にテキストを表示しようとしています。JSON データには、nameレ ミゼラブルのキャラクターの名前を含む という名前のキーがあります。このコードを使用して、各ノードの横にこのテキストを表示しようとしています:

var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", "black")
        .text(function(d) { return d.name;}).style("font-family", "Arial").style("font-size", 12)
        .call(force.drag);

私は基本的に.textテキストを試して表示するように変更しました。テキストを表示する方法を誰か説明できますか? 前もって感謝します。

4

1 に答える 1

11

SVG<circle>要素は、関数を使用してその中に配置したテキストを表示しません.text。テキストを表示する方法は、グラフ SVG<g>要素のノードを作成することです。これらには、 a<circle>および a<text>子要素を含めることができます。

これは次のようになります。

\\create graph nodes using groups
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g").call(force.drag);

node.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d) { return color(d.group); });

node.append("text")
.text(function (d) { return d.name; });

<g>また、力を変更して、グループをティックで変換する必要があります。

force.on("tick", function () {
...
node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
});

http://jsfiddle.net/vrWDc/19/で小さなグラフの動作を確認できます。この方法は、レンダリングする必要があるテキストの量が多いため、大きなグラフに適用するとあまり効率的ではない場合があります。

于 2013-04-26T13:52:59.370 に答える