d3.js差异图区域转换

Question

我在获取差异图的面积部分以正确执行过渡时遇到麻烦。

在我仍在学习的过程中，该图表基于Mike Bostock的差异图表示例，并且过渡由d3noob的过渡帖子指导。

相关位：

  svgchin.select("#clip-above-chin path")
    .duration(750)
    .attr("d", area.y0(0));

  svgchin.select("#clip-below-chin path")
    .duration(750)
    .attr("d", area.y0(height));

  svgchin.select(".area.above")
    .duration(750)
    .attr("d", area.y0(function(d) { return y(d["Post"]); }));

  svgchin.select(".area.below")
    .duration(750)
    .attr("d", area);

完整的jsFiddle在这里： http : //jsfiddle.net/uxb3yq9g/6/

如您所见，直线和轴将按预期更新。 但是，这些区域还没有加入。

有任何想法吗？

Answer 1

您实际上尚未更新绑定到元素的数据。 做就是了

var svgchin = d3.select("#chinook").datum(data).transition();

一切正常。 在此处完成演示。