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

Question

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

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

我目前只是

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

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

我已经多次阅读本教程,但我仍然不明白我是如何做到这一点的.

Answer 1

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

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元素.因此,设置属性的代码与输入大小写相同.

现在,您可以在设置新属性之前简单地添加所需的过渡.