首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >D3:使用组中的多个元素更新数据

D3:使用组中的多个元素更新数据
EN

Stack Overflow用户
提问于 2014-07-23 21:48:52
回答 1查看 10.4K关注 0票数 19

我有一个合并的条形图/折线图。对于输入文件中的每一行,我创建了一个包含多个元素(线、矩形、文本)的组:

var myGroups = svg.selectAll('g').data(myData)
myGroups.enter().append('g')
...
myGroups.append('line')
...
myGroups.append('polygon')
...
myGroups.append('text')
...

我现在只是

svg.selectAll('*').remove()

并在每次数据更新时从头开始创建所有内容。但是,我希望所有元素都能顺利过渡。

我已经使用过this tutorial几次了,但我仍然不明白在我的情况下如何才能做到。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-23 21:56:47

关键是要处理所有选择,而不仅仅是enter选择:

var myGroups = svg.selectAll('g').data(myData);

// enter selection
var myGroupsEnter = myGroups.enter().append("g");
myGroupsEnter.append("line");
myGroupsEnter.append("polygon");
// ...

// update selection -- this will also contain the newly appended elements
myGroups.select("line").attr(...);
// ...

// exit selection
myGroups.exit().remove();

这里有两件事需要进一步解释。首先,enter选择中附加了新元素的元素将合并到更新选择中。也就是说,如果在更新选择中发生了相同的事情,则不需要在enter选择中设置元素的属性。这允许您在不复制代码的情况下添加新元素和更新现有元素。

第二件事在后续的数据更新调用中变得很重要。由于要将数据绑定到的元素并不是实际绘制的元素,因此需要将新数据传播到这些元素。这就是.select()所做的。也就是说,通过执行myGroups.select("line"),您可以将绑定到g元素的新数据传播到它们的子line元素。因此,设置属性的代码与输入大小写的代码相同。

现在,您只需在设置新属性之前添加所需的过渡即可。

票数 44
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24912274

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档