D3.js D3：使用组中的多个元素更新数据

我有一张综合条形图/折线图。对于输入文件中的每一行，我创建一个包含多个元素（行、矩形、文本）的组：

我现在只是

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

并在每次数据更新时从头开始创建所有内容。但是，我希望所有元素都有一个平滑的过渡

---

我已经经历了好几次，但我仍然不明白如何在我的情况下做到这一点。

关键是处理所有选择，而不仅仅是输入选择：

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选择中的元素上设置属性。这允许您附加新元素并更新现有元素，而无需重复代码

第二件事在后续的数据更新调用中变得很重要。由于要将数据绑定到的元素不是实际绘制的元素，因此需要将新数据传播到这些元素。这就是

.select（）

所做的。也就是说，通过执行

myGroups.select（“line”）

，您将绑定到

g

元素的新数据传播到其子元素

line

元素。因此，设置属性的代码与enter大小写相同

---

现在，在设置新属性之前，您只需在需要的地方添加过渡。

您就是我翅膀下的风！根据d3文档，

select（）

应该返回单个元素。但是这里它似乎选择了语句

myGroups.select（“line”）.attr（…）中的所有行元素。在我的实验中，
selectAll（）
似乎不起作用。您能解释一下明显的差异吗？
myGroups
包含多个元素，并且
.select（）
为每个元素执行选择。也就是说，您正在为多个元素选择一个元素
.selectAll（）
可能不起作用，因为它不更新数据。@Larskothoff，你知道如何用新的d3 v4 API更新它吗？我一直在尝试使用
merge
方法和不使用
merge方法来实现这一点，但运气不好。非常感谢您的建议！您应该只需要在处理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();