使用D3.JS中的面积图开始转换和动画

Question

使用D3.JS中的面积图开始转换和动画

3

我希望程序在启动时能够自左向右“绘制”区域图。我已经有一条线在我的图表中实现了这一点，但是我无法正确地使线下的区域进行动画处理或“绘制”自己。目前，这是我的区域代码。

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)

Thanks in advance, Sam

- user2109354

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh · Accepted Answer

考虑使用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/。