d3.js : 강제 레이아웃은 원에서만 작동합니까?

Question

d3.force를 사용하여 노드를 설정하고 각 노드를 연결하는 링크가 있습니다.

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); 

나는 원을 볼 수

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"를 사용하여 노드를 변경하는 경우, 그것은 작동하지 : 나는 노드로 원을 사용하고 때 모든 위대한 작품 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); 

는 그런 다음 텍스트와 같은 다른 요소를 첨부 할 수 있습니다.