Динамическое изменение ширины диаграммы d3.js sankey

Question

Я пытаюсь изменить ширину диаграммы dank sankey, поэтому я могу поместить расширенный контент (подробности об узле) в пространство, созданное изменением размера. Так что пользователь нажимает на узел, диаграмма сокращается до половины его ширины, и я могу добавить содержимое в новое пространство ...

Дело в том, что макет d3 sankey влияет на многие другие элементы, и я не уверен, как сделать сакейская переменная течет по всем элементам.

После определения макета:

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.

(обновлено 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 + ")"; 
     }) 
    })