我正在尝试修改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结果重新定义节点和链接属性。
(更新后的plunker: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 + ")";
})
})