我有一个合并的条形图/折线图。对于输入文件中的每一行,我创建了一个包含多个元素(线、矩形、文本)的组:
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几次了,但我仍然不明白在我的情况下如何才能做到。
发布于 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
元素。因此,设置属性的代码与输入大小写的代码相同。
现在,您只需在设置新属性之前添加所需的过渡即可。
https://stackoverflow.com/questions/24912274
复制相似问题