Javascript D3.js使用新数据更新样条曲线

我试图用新数据更新样条曲线，但在使用D3.js库时遇到了问题

这是我的小提琴：

---

当用户单击按钮时，目标是根据新数据设置每条样条线的动画。我觉得我真的很接近。我已经阅读了文章“使用联接思考”，并用它提出了上面的提琴。

在您的提琴中，在更改数据时，您将d属性应用到了错误的元素。在enter组中，添加一个新组（类人员），然后向该组添加一个行元素。因此，当数据更改时，您需要更新组内的行，而不是组本身。要修复它，请使用

people.selectAll(".line").transition()

而不是

people.transition()

这里有一个有效的例子。逻辑黑猩猩回答说，您选择了错误的元素进行更新

var draw = function() {

    var people = svg.selectAll(".line")
        .data(data, function(d) { return d.name; });

    people
        .transition()
        .duration(1000)
        .attr("d", function(d) { return line(d.values);});

    people.enter()
        .append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values);})
        .style("stroke", function(d) {return color(d.name);});

    people.exit()
        .transition()
        .duration(100)
        .remove()
}

---

为了选择所有的行，

select

必须是

selectAll

。d'oh-好点-将更新答案以反映这个HMMM-使用您的答案，您不再插入包含行的组-可能没有任何显著差异，记住…是的，它们实际上并不需要。我在代码的上一次迭代中提供了帮助，并添加了它们，只是为了向他展示如何做，但它们没有被使用。可以在不更改此代码的情况下重新添加它们。