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