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

Question

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

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)

提前致谢，山姆

Answer 1

考虑使用 svg clipPath ，即:

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/ .