该行在d3.js中重新绘制

Question

我试图根据设置间隔的几个点绘制一条线，我一次传递一个点，但我也可以传递几个。现在我想要一次绘制一条线的点，但不重新绘制已经绘制的线。我该如何解决这个问题？

http://plnkr.co/edit/JjIiqrf97Y8K7YUJRodo?p=preview

  var path=g.selectAll(".line1")
  .data(data)
    .enter()
    .append("path")
    .attr("class", "line1")
    .attr("d", function(d,i) { return (line(data)); })
    .style("stroke", function(d) { return "brown" });

在我真正的问题中，我将实时获得积分，这就是我练习如何绘制点对点并生成动画的原因

Answer 1

因为你的循环。您正在推动datos，然后重新渲染整个阵列。

  var datos = new Array();
   setInterval(function(){
    if(datos.length<newPoints.length){

      datos.push(newPoints[count]);
      count++;

      // Here you are rerendering this new piece of data,
      // AND all of the previous pushes of data.
      display(datos);
    }
   }, 1000);