Question

我正在尝试绘制一条线，通过单击按钮，线“增长”到另一个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小提琴：http://jsfiddle.net/RL_NewtoJS/yvdC7/2/

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

Answer 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

在D3.JS有没有办法使用D3过渡添加一行，一次一个点？

1 个答案: