d3.js差异图表区域过渡

Question

我无法获取差异图表的区域部分以正确执行转换。

正如我仍在学习的那样，该图表基于Mike Bostock的差异图表示例，并且转换由d3noob＆＃39; s transitions post指导。

相关位：

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

一切正常。完整演示here。