我有一个组合的条形图/折线图。对于输入文件中的每一行,我创建一个包含多个元素(行,矩形,文本)的组:
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,但我仍然不明白我是如何做到这一点的。
答案 0 :(得分:41)
关键是处理所有选择,而不仅仅是输入选择:
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();
这里有两件事需要进一步解释。首先,输入选择中已附加新元素的元素将合并到更新选择中。也就是说,如果在更新选择中发生相同的事情,则无需在输入选择中的元素上设置属性。这允许您附加新元素并更新现有元素而无需重复代码。
对于使用更新数据的后续调用,第二件事变得很重要。由于您将数据绑定到的元素不是实际绘制的元素,因此需要将新数据传播给它们。这就是.select()
的作用。也就是说,通过执行myGroups.select("line")
,您将绑定到g
元素的新数据传播到其子line
元素。因此,设置属性的代码与输入大小写相同。
现在,您可以在设置新属性之前简单地添加转换。