D3.js 将g元素的多个部分连接到d3中的相同数据

我试图找出如何在g元素中转换绑定到相同数据的路径和文本

显示我想要的行为。单击“更改”按钮时，路径和文本位置将平滑过渡。问题是我通过将路径和文本元素分别连接到数据来实现这一点，但我认为它违背了用d3维护元素和数据之间一对一映射的目标

有没有一种方法可以模仿

var path = svg.selectAll("path")
     .data(dataset);

path
    .enter().append("path")
    .attr("d", function(d) { return line(d.values) + "Z"; })
    .style("fill", function(d, i) { return color(i); });

path
    .transition().duration(500)
    .attr("d", function(d) { return line(d.values) + "Z"; });

path
    .exit().remove();

链接到g元素内相同数据的元素的模式

。更改按钮不会更新路径和文本，而是导致添加新的g元素

---

编辑时添加：在更正explunit发现的键入错误后，失败的尝试现在可以工作了。

您在连接上的类名中有一个键入错误。此代码：

var g = svg.selectAll(".shapes")
    .data(dataset);

应该是这样的：

var g = svg.selectAll(".shape")
    .data(dataset);

当我像上面那样改变它时，它对我来说很好