Question

我试图弄清楚如何转换绑定到g元素中相同数据的路径和文本。

This gist显示了我想要的行为。单击更改按钮时，路径和文本位置平滑过渡。问题是我通过单独将路径和文本元素连接到数据来实现这一点。 I am not the only one using join this way，但我认为它违反了使用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元素中相同数据的元素的模式？

Here is one of my failed attempts。更改按钮不会更新路径和文本，而是会添加新的g元素。

在编辑时添加：在更正explunit

找到的拼写错误后，失败的尝试现在可以正常工作

Answer 1

您在联接中的班级名称中有拼写错误。这段代码：

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

应该是这样的：

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

当我如上所述更改时，它对我来说很好。

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

1 个答案: