如何使用d3绘制动画折线图,而数据表需要每1秒更新一次？

我想模拟连续传入实时(动态)数据并输入图表的情况

因此,我尝试使用d3演示动画折线图,而数据阵列需要每1秒连续更新一次.

最初的作品灵感来自benjchristensen

这是我修改过的html源码:我的源代码

我尝试通过调用函数填充buffer[100]withrandom number for every 1 secondstartGenerator()

    function startGenerator()
    {
        //signalGenerator();    
        setInterval("signalGenerator()", 1000); //
    }

    function signalGenerator()
    {
        var buffer = new Array(100);

        var i;
        for (i = 0; i < buffer.length; i++)
        {
            buffer[i] = Math.random() * 10;
        }

        FeedDataToChart("#graph1", 300, 300, "basis", true, 100, 100, buffer, 0);       
    }

以下是FeedDataToChart()参数名称:

function FeedDataToChart(id, width, height, interpolation, animate, updateDelay, transitionDelay, data, startIndex)

我用a counter来检查重绘数据索引,每次重新绘制新数据时,都会counter增加1.直到counter < data.length-1,re-draw timer应该停止并buffer[100]再次获取新数据.

        function stopTimer()
        {
            clearInterval(myTimer);
            alert("The redraw timer stop here, get new data from buffer");
        }

        function startTimer()
        {
            if (myTimer == null)
            {
                myTimer = setInterval(function() {
                if (counter < data.length - 1)
                {
                    var v = data.shift(); // remove the first element of the array
                    data.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)
                    if(animate) 
                    {
                        redrawWithAnimation();
                    } 
                    else 
                    {
                        redrawWithoutAnimation();
                    }
                    counter++;
                }
                else
                {
                    alert("no more data in buffer");
                    stopTimer();
                    counter = startIndex;
                }
            }, updateDelay);
            }
        }

我尝试重复该startGenerator()功能时出现问题,结果显示如下:

我是javascript的新手.任何人都可以指出如何从buffer每个数据中提取数据1 second并连续更新单线图表吗？

谢谢!

编辑我更新源和问题已被最小化:我的新来源

我在该处添加.remove()行stopTimer()以删除sgv-holded数据并重置global buffer to null并startGenerator()再次调用该函数以在计时器停止时提取新数据.

现在唯一的问题是,每次创建新图形时,它都会创建一个新的sgv路径,其位于前一个之下.每次创建时,新图形都会向下移动.检查我今天更新的新来源.运行代码后,您将捕获我的描述.

每次更新时,如何在同一位置修复sgv路径？