动态更改d3.js sankey图的宽度

我试图修改d3 sankey图表的宽度，以便可以将展开的内容（有关节点的详细信息）放入由调整大小创建的空间中。因此，用户点击节点，图表缩小到其一半的宽度，我可以将内容添加到新空间中...动态更改d3.js 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

来源

2014-08-28 abenrob

您使用的是输入（）重新输入数据，出口（）方法？这是关键。 – 2014-08-29 02:18:23

这比我想象... 的桑基排版功能只是定义的大小和位置的事情更简单，因此需要被调用，以确定变化，那么我只需要根据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 + ")"; 
     }) 
    })

来源

2014-08-29 08:50:22 abenrob

您好@abenrob 感谢您的回答。你能否请更新重击者？看来你创建的plunker不可用。 – 2016-08-02 09:44:40

动态更改d3.js sankey图的宽度

回答

相关问题