Question

我想要区域图＆＃34;画＆＃34;本身在程序开始时从左到右。我的图表中已经有一行执行此操作，但是我无法使该行下方的区域正确生成动画，或者＆＃34;绘制＆＃34;本页首次启动时自身。目前，这就是我所在地区。

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)

我可以把那个区域弄得很好并画出细线，但是我无法做到这一点，以便当页面第一次加载时，该区域基本上会画出＆＃34;画出＆＃34;从左到右本身就像一条线在这个例子中，从左到右，不是从右到左。

任何帮助都表示赞赏，我已尝试使用以下内容，但它并没有为我工作。

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

在D3.JS中使用面积图启动过渡和动画

1 个答案: