d3.js：強制佈局是否僅適用於圓圈？

Question

我正在使用d3.force來設置節點並且有連接每個節點的鏈接。這一切的偉大工程，當我用圓圈作爲節點：

var nodes = [{ title: "ABC", group: 1 }, { title: "DEF", group: 1 }, { title: "Blah", group: 1 }]; 
    var links = [{ source: 0, target: 1 }, { source: 0, target: 2 }]; 

    var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(function(d) { 
     console.log(d); 
     return 250 * Math.random() + 100; 
    }) 
    .size([r, r]); 

    force.links(links) 
    .nodes(nodes) 
    .start(); 

    var link = svg.selectAll("line.link") 
    .data(links) 
    .enter() 
    .append("line") 
    .attr("class", "link") 
    .style("stroke-width", 1); 

    var node = svg.selectAll("circle.node") 
    .data(nodes) 
    .enter() 
    .append("circle") 
    .attr("class", "node") 
    .attr("r", 15) 
    .call(force.drag); 

但是，如果我改變的節點使用「G」，它停止工作：

var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("r", 15) 
    .call(force.drag); 

    var circle = node.append("circle") 
    .attr("fill", function(d) { 
     var b = Math.floor(255 * Math.random()), 
      rgba = "rgba(0, 0, " + b + ", 0.7)"; 

     return rgba; 
    }) 
    .attr("r", 15); 

我能看到圓被添加到g元素，但他們不是他們應該是的地方，他們沒有通過鏈接連接。

我真的想使用「g」元素作爲節點，以便我可以添加文本。有沒有人有這方面的見解？

或者，如果有辦法將文本添加到「圈子」元素。我也對此表示歡迎。

謝謝！

Answer 1

嘗試整合此爲一個語句，並在最後通話：

var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .append("circle") 
    .attr("fill", function(d) { 
     var b = Math.floor(255 * Math.random()), 
     rgba = "rgba(0, 0, " + b + ", 0.7)"; 
     return rgba; 
    }) 
    .attr("r", 15) 
    .call(force.drag); 

然後你可以附加其他元素，如文本。