D3 - フォースレイアウトの更新ダイアグラムにテキストラベルを追加する

Question

私はマイクボストックのD3の例の1つをオンラインで見てきたが、少し成功した。

https://bl.ocks.org/mbostock/1095795

私は、追加のノードとリンクを追加することができますし、これは私のニーズに合うように得ることができました。私は各ノードにラベルを追加しようとしています。私は何か根本的なものが欠けていると思います。

私はテキストラベル用の新しいグループを追加しました。これは、例のリスタート機能とシミュレーションのティック機能に含まれています。 DOMに表示される内容は私の見解では正しいようですが、ラベルは図の中央に表示されます。

ここに私が持っているもののフィドルがありますが、どんな助けでも大歓迎です。私はD3/SVGに関する多くの経験を実際には持っていないので、かなり根本的なものが欠けているはずです。

は、具体的にどのような私が追加したことである：

は、テキストの追加のグループを追加します

var g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"), 
link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"), 
node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node"), 
text = g.append("g").selectAll("text"); 

更新ノードIDに基づいてテキストグループ

// Apply the general update pattern to the text. 
    text = text.data(nodes, function(d) { return d.id; }); 
    text.exit().remove(); 
    text = text.enter().append("text").text(function (d) {return d.id;}).merge(text); 

ダニ機能の更新にノードと一致する

text.attr("cx", function(d) { return d.x;}) 
    .attr("cy", function(d) { return d.y;}); 

https://jsfiddle.net/3b68rm94/1/

多くのおかげです。

Answer 1

使用

text.attr("x", function(d) { return d.x;}) 
    .attr("y", function(d) { return d.y;}); 

CXとCYは円（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx）のために使用されます。 xとyはうまくいくようです。