在 D3.JS 中使用面积图启动过渡和动画

我想让面积图在程序开始时从左到右“绘制”本身。我的图表中已经有一条线执行此操作，但是我无法使该线下方的区域正确设置动画，或者在页面首次启动时“绘制”自身。目前，这就是我所在地区的情况。

var area = d3.svg.area()
    .x(function(d) {return xScale(d.date); })
    .y0(line_chart_height)
    .y1(function(d) {return yScale(d.close); });

line_chart.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area)

我可以很好地获得那里的区域并很好地绘制线条，但是我无法做到这一点，以便当页面首次加载时，该区域基本上会像本例中的线条一样从左到右“绘制”自身，除了从左到右，而不是从右到左。

感谢任何帮助，我尝试使用以下内容，但它对我不起作用。

.datum(data)
.transition().duration(2500)
.attr("d", area)

提前致谢， 山姆

考虑使用svg 剪辑路径 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath, i.e.:

svg.append("clipPath")
    .attr("id", "rectClip")
  .append("rect")
    .attr("width", 0)
    .attr("height", height);

然后，您可以通过在页面加载时转换剪切路径来模拟项目的绘制：

d3.select("#rectClip rect")
  .transition().duration(3000)
    .attr("width", width);

这是一个 jsfiddle 示例：http://jsfiddle.net/qAHC2/688/ http://jsfiddle.net/qAHC2/688/.