D3js가 중복 노드를 강제로 입력합니다.

Question

d3js에 몇 가지 문제가 있는데 어떤 일이 일어나고 있는지 알 수 없습니다. 아이디어는 일부 끝점 데이터 (첫 번째 img)에서 초기 그래프를 그리는 것입니다. 잘 작동합니다. 각 노드는 클릭 할 때 클릭 할 때 해당 노드에 대해 ajax 호출이 수행되고 데이터는 해당 노드 nodes.push (xx)의 일부 기준에 따라 반환됩니다. links.push (xx)는 새 노드를 추가하고 restart()는 호출됩니다 새 노드와 링크를 그립니다. 문제는 주 그래프가 올바른 일을하고 있다는 것입니다 (첫 번째 그래프에 가짜 데이터를 넣어야했기 때문에 스크린 샷에 표시되지 않았습니다. 즉, 끝점/레코드/id/첫 번째 호출은 데이터를 반환하지 않습니다). 무작위 노드가 오른쪽 하단 구석에 나타납니다.

첫 번째/두 번째/세 번째 클릭 후 데이터가 변경되지 않더라도 동일한 데이터가 전달 된 후 restart() 후 node.enter()로 잘못 처리됨을 알 수 있습니다. .

JS 뿐인 : http://jsfiddle.net/5754j86e/

var w = 1200, 
     h = 1200; 

var nodes = []; 
var links = []; 
var node; 
var link; 
var texts; 

var ids = []; 

var circleWidth = 10; 

var initialIdentifier = "marcin"; 

nodes = initialBuildNodes(initialIdentifier, sparql); 

links = initialBuildLinks(sparql); 

//Add SVG 

var svg = d3.select('#chart').append('svg') 
    .attr('width', w) 
    .attr('height', h); 

var linkGroup = svg.append("svg:g").attr("id", "link-group"); 
var nodeGroup = svg.append("svg:g").attr("id", "node-group"); 
var textGroup = svg.append("svg:g").attr("id", "text-group"); 

//Add Force Layout 

var force = d3.layout.force() 
    .size([w, h]) 
    .gravity(.05) 
    .charge(-1040); 

force.linkDistance(120); 

restart(); 


function restart() { 

    force.links(links) 

    console.log("LINKS ARE: ", links) 

    link = linkGroup.selectAll(".link").data (links); 

    link.enter().append('line') 
     .attr("class", "link"); 

    link.exit().remove(); 

    force.nodes(nodes) 

    console.log("NODES ARE: ", nodes) 

    node = nodeGroup.selectAll(".node").data (nodes); 

    node.enter().append("svg:g") 
      .attr("class", "node") 
      .call(force.drag); 

    node.append('circle') 
     .attr('cx', function(d) { return d.x; }) 
     .attr('cy', function(d) { return d.y; }) 
     .attr('r', circleWidth) 
     .attr('fill', function(d, i) { 
      if (i>0) { return palette.pink } 
      else { return palette.blue } 
     }) 

     .on("click", function(d) { 
      nodeClicked (d); 
     }) 

     .on('mouseenter', function(d){ 
      nodeMouseEnter(d) 
      }) 
     .on('mouseout', function(d){ 
      nodeMouseOut(d) 
     }); 


    node.exit().remove(); 

    var annotation = textGroup.selectAll(".annotation").data (nodes); 

    annotation.enter().append("svg:g") 
      .attr("class", "annotation") 
      .append("text") 
      .attr("x", function(d) { return d.radius + 4 }) 
      .attr("y", ".31em") 
      .attr("class", "label") 
      .text(function(d) { return d.name; }); 
    annotation.exit().remove(); 


    force.start(); 
} 


function nodeClicked (d) { 

    // AJAX CALL happens here and bunch of nodes.push({name: "new name"}) happen 

} 


force.on('tick', function(e) { 
     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('transform', function(d, i) { 
      return 'translate('+ d.x +', '+ d.y +')'; 
     }) 

     svg.selectAll(".annotation").attr("transform", function(d) { 
      var labelx = d.x + 13; 
      return "translate(" + labelx + "," + d.y + ")"; 
     }) 



    }); 

Answer 1

가 좋아 내가 가서 워드 프로세서 (https://github.com/mbostock/d3/wiki/Selections#enter)를 기반으로, 그것을 T : 내 코드에서

var update_sel = svg.selectAll("circle").data(data) 
update_sel.attr(/* operate on old elements only */) 
update_sel.enter().append("circle").attr(/* operate on new elements only */) 
update_sel.attr(/* operate on old and new elements */) 
update_sel.exit().remove() /* complete the enter-update-exit pattern */ 

을 당신은 내가 입력합니까()과 다시 한번 내가 별도의 성명에서 노드 원을 추가 볼 수 있습니다. ,

node.enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag) 

     .append('circle') 
     .attr('cx', function(d) { return d.x; }) 
     .attr('cy', function(d) { return d.y; }) 
     .attr('r', circleWidth) 
     .attr('fill', function(d, i) { 
      if (i>0) { return palette.pink } 
      else { return palette.blue } 
     });