在 D3.JS 中，有没有办法使用 D3 转换一次添加一行？答案

【问题标题】：In D3.JS Is there a way to add on to a line, one point at a time, using D3 transition?在 D3.JS 中，有没有办法使用 D3 转换一次添加一行？
【发布时间】：2013-12-02 00:02:16
【问题描述】：

我正在尝试绘制一条线，通过单击一个按钮，该线“增长”到另一个 x 和 y 点，它们是数据数组中的下一个数字，而之前的 x 和 y 点已经是“绘制”保留在那里。

我能够通过在单击功能上向我的线添加 X2 和 Y2 属性来成功完成这项工作，但我希望它是这样，当您再次单击时，线会增长到下一个 X 和 Y 点数据数组：dataGDP[2].date 和 dataGDP[2].GDPreal。

    var realGDPline = canvasGDP.append("line")
   .attr("class", "line")
   .attr("x1", xScaleGDP(dataGDP[0].date))
   .attr("y1", yScaleGDP(dataGDP[0].GDPreal));

...关于点击功能：

     realGDPline
    .transition()
    .duration(1200)
    .attr("x2", xScaleGDP(dataGDP[1].date))
    .attr("y2", yScaleGDP(dataGDP[1].GDPreal));

如果这个地方也有，网上有例子吗？

这是我迄今为止一直在做的事情的 JS Fiddle：http://jsfiddle.net/RL_NewtoJS/yvdC7/2/

我还有一个圆圈和文本，可以通过点击功能移动/更新，这似乎可以通过将 1 添加到名为“counter”的变量并使用该变量来选择数组中的下一个数据点，但我'不确定这是否也可以以某种方式应用于生产线。

【问题讨论】：

你也可以在纯 SVG 中做到这一点 -- carto.net/svg/samples/animated_bustrack.shtml

标签： d3.js line transition

【解决方案1】：

我会使用line generator 代替线元素。

为防止在将点添加到行尾时出现奇怪的过渡，我们的行生成器将具有等于数据集中元素总数的点数。不可见的额外点堆积在最后一点的线上。

var lineGen = d3.svg.line()
    .x(function(d, i){
      return xScaleGDP(i <= counter ? d.date : dataGDP[counter].date); })
    .y(function(d, i){
      return yScaleGDP(i <= counter ? d.GDPreal : dataGDP[counter].GDPreal); })

添加到 DOM 的路径，附加数据和绘图点：

var pathLine = canvasGDP.append('path').datum(dataGDP)
    .attr('d', lineGen)
    .classed('line', true)

点击时，我们重新计算路径并过渡到它：

pathLine.transition().duration(1200)
    .attr('d', lineGen)

http://bl.ocks.org/1wheel/7743519

【讨论】：