该行在d3.js中重新绘制 [英] the line is repainted in d3.js

问题描述

我正在尝试基于setinterval的一些点画一条线，我一次传递一个点，但我也可以传递多个点.现在，我希望一次绘制一条线的点，但不要重新绘制那些已经绘制的点.我该如何解决这个问题?

I'm trying to draw a line based on a few points that come with the help of a setinterval, I'm passing the points one at a time but I could also pass several. for now I want the points of the line to be drawn one at a time but without re-drawing those that have already been drawn. How can I solve this problem ?

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" });

在我的实际问题中，我将实时接收点数，这就是为什么我正在练习如何绘制点对点并生成动画的原因

in my real problem, I will receive points in real time that is why I am practicing how to draw point to point and generate an animation

推荐答案

是因为您的循环.您要推送到datos，然后重新渲染整个数组.

Its because of your loop. You are pushing to datos and then rerendering the entire array.

  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);

这篇关于该行在d3.js中重新绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！