我正在使用D3.js强制布局创建图形。
要更新节点和边缘,请按照以下示例代码进行操作
http://bl.ocks.org/mbostock/1095795。
这意味着我有以下代码来初始化布局:
var nodes = [];
var edges = [];
var force = d3.layout
.force()
.nodes(nodes)
.links(edges)
...
var link = svg.selectAll('.link');
var node = svg.selectAll('.node');
我在一个函数中更新数据:
//(nodes and edges array has been updated before)
link = link.data(force.links());
link.enter()
.append('g')
.attr('class', 'link');
link.append('line')
.style('stroke-width', function (d) {
return d.bond*2 + 'px';
});
link.exit().remove();
node = node.data(force.nodes());
node.enter()
.append('g')
.attr('class', 'node')
.call(force.drag);
node.append('circle')
.attr('r', function (d) { return radius(d.size) })
.style('fill', function (d) { return color(d.type) });
node.exit().remove();
force.start();
我检查了节点和边数组以及force.nodes()和force.links()的内容,看来一切正确,
但该图显示了先前数据的边缘。
因此,我还查看了svg,似乎节点和边的组(
<g>
)分别包含多个“ line”和“ circle”元素:<g class="link">
<line x1="39.28621930166058" y1="256.22690655336356"
x2="217.9040028325144" y2="12.304247302113906"
style="stroke-width: 2px;"></line>
<line x1="199.64928632623412" y1="275.35140495955585"
x2="275.5229250036658" y2="100.33170397523202"
style="stroke-width: 2px;"></line>
</g>
节点也是如此。
更新时如何从组中删除以前的元素?
我似乎在链接的示例或d3文档中找不到答案。
最佳答案
link.enter()
.append('g')
.attr('class', 'link');
link.append('line')
.style('stroke-width', function (d) {
return d.bond*2 + 'px';
});
link.exit().remove();
link是g.link元素与数据的选择/数据联接。
通过上面的内容,您可以通过.enter()为每个新链接添加一个新的g元素,但是由于没有Enter()限定符,因此您会向新链接和现有链接添加一个新的line元素。
尝试
var newLinks = link.enter()
.append('g')
.attr('class', 'link');
newLinks.append('line')
.style('stroke-width', function (d) {
return d.bond*2 + 'px';
});
PS。如果这适用于线路,则节点的情况相同。
关于javascript - D3.js更新留下重复的svg元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34765158/