Javascript 使用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)

提前感谢,， Sam

考虑使用，即：

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

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

---

下面是一个示例jsfiddle:。

这很好。干得好！是否还有其他属性采用

url（#id）

值？它似乎是

document.getElementById

的缩写，但它只在svg中工作？非常好的主意！也适用于我的其他图表。谢谢

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