动态改变 d3.js sankey 图表的宽度答案

【问题标题】：Dynamically change width of d3.js sankey chart动态改变 d3.js sankey 图表的宽度
【发布时间】：2014-08-28 15:15:32
【问题描述】：

我正在尝试修改 d3 sankey 图表的宽度，因此我可以将扩展内容（有关节点的详细信息）放入由调整大小创建的空间中。所以用户点击节点，图表缩小到宽度的一半，我可以将内容附加到新空间......

问题是，d3 sankey 布局会影响许多其他元素，我不确定如何使 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

【问题讨论】：

您是否使用 enter()、exit() 方法重新输入数据？这就是关键。

标签： javascript d3.js sankey-diagram

【解决方案1】：

这比我想象的要简单... sankey布局函数只是定义了事物的大小和位置，所以需要调用确定变化，然后我只需要根据sankey结果重新定义节点和链接属性。

（更新的插件：http://plnkr.co/edit/ICyqJk?p=preview）

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 + ")";
        })
    })

【讨论】：

嗨@abenrob 感谢您的回答。你能更新一下plunker吗？您创建的 plunker 似乎不可用。