d3.js sankey 차트의 너비를 동적으로 변경합니다.

Question

d3 sankey 차트의 너비를 수정하려고하므로 크기 조정으로 생성 된 공간에 확장 된 내용 (노드에 대한 세부 정보)을 넣을 수 있습니다. 그래서 사용자가 노드를 클릭하면 차트의 너비가 절반으로 줄어들고 새 공간에 내용을 추가 할 수 있습니다 ...

d3 sankey 레이아웃은 다른 많은 요소에 영향을 미치며 작성 방법은 확실하지 않습니다. sankey change는 모든 요소를 ​​통해 흐릅니다.

레이아웃을 정의한 후 :

var sankey = d3.sankey() 
    .nodeWidth(15) 
    .nodePadding(10) 
    .size([width, height]); 

을 한 후 데이터

sankey 
    .nodes(data.nodes) 
    .links(data.links) 
    .layout(32); 

에서 레이아웃을 구축 나는하지 않습니다 분명히

d3.selectAll(".node") 
    .on("click",function(d){ 
     sankey.size([width/2, height]) 
    }) 

를 통해 레이아웃을 업데이트하려 작업. 요소를 통해 다시 밀어 넣는 방법을 모릅니다!

Plunker가 전체 그림 보여주는

: http://plnkr.co/edit/udEOog?p=preview

Answer 1

이 내가 ... sankey 레이아웃 기능은 단지 크기와 사물의 위치를 ​​정의 생각했던 것보다 더 간단했다, 변경 사항을 결정하기 위해 호출 할 필요가 있으므로 , 그런 다음 sankey 결과를 기반으로 노드 및 링크 속성을 다시 정의하면됩니다.

(업데이트 plunker :)

d3.selectAll(".node") 
    .on("click",function(d){ 
     var newwidth; 
     if (this.className.baseVal.indexOf("shift")>=0){ 
     newwidth = width; 
     d3.selectAll(".node") 
      .classed("shift",false) 
     } else { 
     newwidth = width*.5; 
     d3.selectAll(".node") 
      .classed("shift",true) 
     } 
     sankey 
     .size([newwidth, height]) 
     .layout(32) 
     link 
     .transition() 
     .attr("d", path) 
     node 
     .transition() 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }) 
    })