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

这里是一个例子jsfi ddle：http://jsfiddle.net/qAHC2/688/。