서클 팩 레이아웃 D3 - 새 데이터에 노드 추가 제거

Question

사용자가 서클 팩 레이아웃을 사용하여 3 가지 다른 데이터 세트를 탐색하게하려는 경우가 있습니다. Bostock's Zoomable circle packing을 사용하고 있습니다.

추가로 데이터를로드하고 새 노드를 만드는 3 가지 옵션이 추가되었습니다. 여기 chartid 이러한 요소에서 전달됩니다.

function changeDataSet (차트 id) { console.log (차트 id); //console.log(nodes);

//add new chart data depending on the selected option 
if(chartid === "plevels") 
{ 
    root = JSON.parse(newKmap_slevels); 
    focus = root; 
    nodes = pack.nodes(root); 
} 
else if (chartid === "pduration") 
{ 
    root = JSON.parse(newKmap_sduration); 
    focus = root; 
    nodes = pack.nodes(root); 
} 
else 
{ 
    root = JSON.parse(newKmap_stype); 
    focus = root; 
    nodes = pack.nodes(root); 
} 

refresh(); 

}

은 그 때 나는 새로 고침 기능을 가지고,하지만 난 노드를 existting 제거하고 새로운 데이터 세트를 기반으로 새로운 것들을 추가하는 방법 understnading하고 있지 않다. 일부 전환 애니메이션을 표시하는 것도 좋습니다.

현재 초기 요소를 제거하고 다시 작성하려고 시도하고 있지만 그렇게하면 차트가 비어있게됩니다.

var refresh = function() { 
    //var nodes = pack.nodes(root); 
    var duration = 10; 
    console.log(nodes); 
    d3.select("#conf_knowledge_map").selectAll("g") 
    .remove(); 

    svg 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

    circle = svg.selectAll("circle") 
    .data(nodes) 
    .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { 
     if (focus !== d) zoom(d), d3.event.stopPropagation(); 
     }); 

    text = svg.selectAll("text") 
     .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
     .text(function(d) { 
     //console.log(d); 
     if(d.size) 
     { 
      return d.name + ":" + d.size; 
     } 
     else 
      return d.name; 
     }); 
} 

제 질문은 어떻게 제거하고 클릭시 새 노드를 만들 수 있습니까?

UPDATE 내가 레이아웃을 확대하기 위해 모든 노드를 제거하고 새로운 데이터를 기반으로 새로운 노드를 추가 할 수 있지만 지금은 클릭에 할 수 있었다

은 모두 엉망이다. 변환 함수는 새 노드에 어떻게 든 적용되지 않습니다.

var refresh = function() { 
    svg.selectAll(".node").remove(); 
    svg.selectAll(".label").remove(); 

    var nodes = pack.nodes(root); 
    focus = root; 
    circle = svg.selectAll("circle") 
    .data(nodes) 
    .enter() 
    .append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .attr("r", function(d) { return d.r;}) 
     .attr("cx", function(d) { 
     console.log(d); 
     // if(d.depth === 0) 
     // return 0; 
     // else 
      // return d.x - (diameter/2); 
      return d.x; 
     }) 
     .attr("cy", function(d) { 
      return d.y; 
     }) 
     // .attr("transform", "translate(" + "x" + "," + "y" + ")") 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { 
     // d.x = d.x - (diameter/2); 
     // d.y = d.y - (diameter/2); 
     if (focus !== d) zoom(d), d3.event.stopPropagation(); 
     }); 

    text = svg.selectAll("text") 
    .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .attr("x", function(d) {return d.x - (diameter/2);}) 
     .attr("y", function(d) {return d.y - (diameter/2);}) 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
     // .attr("transform", "translate(" + "x" + "," + "y" + ")") 
     .text(function(d) { 
     //console.log(d); 
     if(d.size) 
     { 
      return d.name + ":" + d.size; 
     } 
     else 
      return d.name; 
     }); 

} 

새 노드를 제 위치에 변형시키고 줌이 제대로 작동하려면 어떻게해야합니까?

업데이트 2 이제 'g'요소를 원에 붙이고 모든 노드와 텍스트를 올바르게 표시 한 후 변환이 올바르게 작동합니다. 유일한 문제는 이제 서클을 클릭 할 때 줌이 작동하지 않는다는 것입니다!

줌 작업을 수행하는 방법 ??

Answer 1

그래서 내가 혼합 된 문장을 차례로 사용하여 세 개의 독립적 인 원형 팩 레이아웃을 동시에 만드는 실수를 저지르고 있습니다. 이것은 svg 섹션을 선택해야 할 때와 다른 요소가 모두 선택되어 다른 이벤트로 잘못 첨부 될 때 문제가되었습니다.

그래서 세 가지 구현을 분리하고 각 세 개의 레이아웃을 하나씩 작성하기로 결정했습니다. 이 방법으로 섹션 선택을 유지하고 이벤트 등을 첨부하고 별도로로드 한 다음 필요할 때로드합니다.