D3 force directed graph 문제 : 노드가 좌표 (0,0)에 스택 됨

Question

d3 force directed graph를 만들고 있는데 노드에 대한 레이블을 추가 할 때까지 괜찮습니다. (this is the working version on codepen).

제 생각에 노드는 'g'요소로 묶어야하지만, 시도하면 모든 노드가 왼쪽 위 모서리에 쌓입니다. JavaScript에 익숙하지 않은데, 분명히 뭔가 빠져 있습니다. 누군가 내 실수를 고칠 수 있다면 감사 할 것입니다. labels wont show up on d3 force diagram

var dataURL = "https://raw.githubusercontent.com/Aeternia-ua/temp1/c50fa778c12c6d355fe08b54cb3f1ce24acfa4e9/graphtest.json"; 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

var color = d3.scaleOrdinal(d3.schemeCategory20c); 

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { 
     return d.id; 
    })) 
    .force("charge", d3.forceManyBody().strength(-150)) 
    .force("center", d3.forceCenter(width/2, height/2)); 

d3.json(dataURL, function(error, graph) { 
    if (error) throw error; 

    simulation.nodes(graph.nodes); 
    simulation.force("link").links(graph.links); 

    var link = svg.append("g") 
     .attr("class", "links") 
     .selectAll("line") 
     .data(graph.links) 
     .enter().append("line"); 

    var node = svg.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(graph.nodes) 
     .enter().append("circle") 

    //Setting node radius by group value. If 'group' key doesn't exist, set radius to 8 
    .attr("r", function(d) { 
      if (d.hasOwnProperty('group')) { 
       return d.group * 2; 
      } else { 
       return 9; 
      } 
     }) 
     //Colors by 'group' value 
     .style("fill", function(d) { 
      return color(d.group); 
     }) 
     .call(d3.drag() 
      .on("start", dragstarted) 
      .on("drag", dragged) 
      .on("end", dragended)); 

    node.append("svg:title") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { 
      return d.id 
     }); 

    var labels = svg.append("g") 
     .attr("class", "label") 
     .selectAll("text") 
     .data(graph.nodes) 
     .enter().append("text") 
     .attr("dx", 6) 
     .attr("dy", ".35em") 
     .style("font-size", 10) 
     .text(function(d) { 
      return d.id 
     }); 


    simulation 
     .nodes(graph.nodes) 
     .on("tick", ticked); 

    simulation.force("link") 
     .links(graph.links); 
}); 

function ticked() { 

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

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

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

function dragstarted(d) { 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
    d.fx = d.x; 
    d.fy = d.y; 
} 

function dragged(d) { 
    d.fx = d3.event.x; 
    d.fy = d3.event.y; 
} 

function dragended(d) { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d.fx = null; 
    d.fy = null; 
} 

Answer 1

은 d3.json 콜백 내부에 기능 ticked() 이동

:

d3.json(dataURL, function(error, graph) { 
    //... 
    function ticked(){ 
     //... 
    }; 
}; 

을 또한, .links에서 .link에 링크의 클래스를 변경 :

var link = svg.append("g") 
    .attr("class", "link") 

을 여기에 업데이트 된 CodePen입니다 : http://codepen.io/anon/pen/ORejme?editors=0110

Answer 2

link

Full code on codepen

, node 및 labels가 d3.json() 호출에서 익명 함수에 로컬로 정의 등 ticked() 내에서 이용할 수 없습니다 :
나는 유사한 주제의 솔루션을 시도했다.