javascript - D3.js 用新数据更新样条

Question

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

这是我的小提琴：http: //jsfiddle.net/2N2rt/22/

当用户单击按钮时，目标是让每个样条曲线根据新数据进行动画处理。我觉得我真的很亲近。我已经阅读了“用联接思考”的文章，并用它来提出上面的小提琴。

Answer 1

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

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

代替

people.transition()

Answer 2

这是一个工作示例http://jsfiddle.net/3UkKW/4/。正如逻辑黑猩猩回答的那样，您选择了错误的元素进行更新。

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()
}