強制的な有向グラフのd3ノードにテキストラベルを追加し、ホバーのサイズを変更する

Question

d3 Force Directed Graphのノードにテキストラベルを追加しようとしていますが、問題があるようです。 これは私のFiddle次のとおりです。

私はこのようなノード名を追加する場合：

node.append("text") 
    .attr("class", "word") 
    .attr("dy", ".35em") 
    .text(function(d) { 
     console.log(d.name); 
     return d.name; 
    }); 

そこには変更はませんが、名前が記録されてきています。

私はbounding boxを使用しようとしたとき、ノードラベルが登場しますが、ノードのリンクがfine.This fiddleている間ノードはボックスの左上隅に積み上げられているが、私は中に入れたその努力の成果である。誰もが言うことができます私は何をやっているのですか？

Answer 1

円内にテキスト要素を追加していますが、これは機能しません。あなたはSVG要素の下にグループを追加し、円と各グループ内のテキストを追加することができます

// Create the groups under svg 
var gnodes = svg.selectAll('g.gnode') 
    .data(graph.nodes) 
    .enter() 
    .append('g') 
    .classed('gnode', true); 

// Add one circle in each group 
var node = gnodes.append("circle") 
    .attr("class", "node") 
    .attr("r", 5) 
    .style("fill", function(d) { return color(d.group); }) 
    .call(force.drag); 

// Append the labels to each group 
var labels = gnodes.append("text") 
    .text(function(d) { return d.name; }); 

force.on("tick", function() { 
    // Update the links 
    link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

    // Translate the groups 
    gnodes.attr("transform", function(d) { 
    return 'translate(' + [d.x, d.y] + ')'; 
    });  

}); 

この戦略であなたのフィドルのフォークはかなり私が望んでhere