D3.js用新数据更新样条[关闭]答案

【问题标题】：D3.js updating spline with new data [closed]D3.js用新数据更新样条[关闭]
【发布时间】：2012-10-08 07:03:58
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

而不是

people.transition()

【讨论】：

select 必须是 selectAll 才能选择所有行。
d'oh - 好点 - 将更新答案以反映这一点

【解决方案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()
}

【讨论】：

嗯 - 有了你的答案，你不再插入包含这些行的组 - 可能不会有任何显着差异，请注意......
是的，实际上并不需要它们。我帮助了之前的代码迭代并添加了它们只是为了向他展示如何做到这一点，但它们并没有被使用。无需更改此代码即可重新添加它们。