Question

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

当用户单击该按钮时，目标是根据新数据为每个样条线设置动画。我觉得我真的很亲密。我已经阅读了文章“思考加入”并用它来提出上面的小提琴。

Answer 1

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

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

而不是

people.transition()

Answer 2

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

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

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

2 个答案: