我正在尝试修改 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
最佳答案
这比我想象的要简单... 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 + ")";
})
})
关于javascript - 动态改变 d3.js 桑基图的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25552363/