在D3.JS开始过渡和动画随着区域图 [英] Starting Transitions and Animations With Area Graph in D3.JS

问题描述

我想有区域图在节目的开始拉拢本身从左至右。我已经在我的图做这一行，但我不能让该地区的线下正确动画，或画本身在页面第一次启动时。目前，这就是我对我的领域。

I want to have the area graph "draw" itself at the start of the program from left to right. I already have one line in my graph doing this, however I cannot get the area under the line to correctly animate, or "draw" itself when the page first boots up. Currently, this is what I have for my area.

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)

我可以上去看看精致的面积和画线很好，但我不能让它这样，当第一次加载页面的区域将主要从画本身从左到右一条线，如将在这个例子中除从左至右，而不是从右到左。

I can get the area up there fine and draw the line fine, but I can't make it so that when the page first loads the area will essentially "draw" itself from left to right like a line would in this example, EXCEPT from left to right, not right to left.

任何帮助是AP preciated，我用下面并尝试了hans't为我工作。

Any help is appreciated, I've tried using the following and it hans't worked for me.

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

在此先感谢，
山姆

Thanks in advance, Sam

推荐答案

考虑使用 SVG clipPath ，即：

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

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

Then, you can simulate the drawing of the items by transitioning the clipping path on page load:

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

下面是一个例子的jsfiddle： http://jsfiddle.net/qAHC2/688/

Here is an example jsfiddle: http://jsfiddle.net/qAHC2/688/.

这篇关于在D3.JS开始过渡和动画随着区域图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！