怎么给d3.js的nodeWidth属性加入一个回调函数
时间: 2024-03-12 19:49:18 浏览: 95
bihisankey:D3 JavaScript库插件,用于绘制双向分层Sankey图
在d3.js中,`nodeWidth`属性是一个固定的值,不能直接通过回调函数来动态计算。但是,我们可以通过在`nodes`数组中添加一个自定义属性来实现类似的效果。
具体实现方法如下:
1. 在`nodes`数组中添加一个自定义属性,比如`nodeWidthCallback`,用来保存回调函数。
```javascript
var nodes = [
{name: "A", nodeWidthCallback: function(d) { return d.size * 10; }},
{name: "B", nodeWidthCallback: function(d) { return d.size * 20; }},
{name: "C", nodeWidthCallback: function(d) { return d.size * 30; }}
];
```
2. 在设置节点属性的函数中,使用`nodeWidthCallback`属性来计算节点的宽度。
```javascript
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("rect")
.attr("class", "node")
.attr("width", function(d) { return d.nodeWidthCallback(d); })
.attr("height", function(d) { return d.size * 10; })
.attr("fill", "blue")
.attr("x", function(d, i) { return i * 100; })
.attr("y", function(d) { return height/2 - d.size * 5; });
```
在上面的代码中,通过`d.nodeWidthCallback(d)`来调用每个节点的回调函数,并根据返回值来设置节点的宽度。
这样就可以通过回调函数来动态计算节点的宽度了。
阅读全文