动态更改d3.js sankey图表的宽度
Dynamically change width of d3.js sankey chart
我正在尝试修改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 + ")";
})
})
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- d3 sankey图-如何设置y位置
- 在D3插件sankey.js和html代码之间定义源代码
- D3 Sankey扩散功能
- 外部 d3.sankey:d3 无法识别 - Django
- d3.js Sankey Link转换未转换到位(提供了jsbin)
- 如何在Google中指定数字格式's sankey charts/D3
- d3.js和Sankey图错误
- d3.js sankey图-使用多角数组作为节点
- 动态更改d3.js sankey图表的宽度
- 需要D3 Sankey图表的帮助
- 如何在d3.jS中为Sankey图的链接添加第二个值:
- 如何使用d3.js库使sankey图中的节点可点击
- 使用D3.js库更改Sankey Diagram中节点的颜色