与nvd3.js的实时线图

Question

我正在尝试使用nvd3.js创建一个实时图表,它会定期更新,并且会产生实时处理数据的印象.

现在我已经能够创建一个定期更新图形的函数,但我无法在"状态"之间进行平滑过渡,例如向左转换的行.

这是我使用nvd3.js所做的,这里有趣的代码是:

d3.select('#chart svg')
    .datum(data)
    .transition().duration(duration)
    .call(chart);

现在,我已经能够使用d3.js生成我想要的东西,但我希望能够使用nvd3.js提供的所有工具.这是我想用nvd3制作的

使用d3.js进行转换的有趣代码是:

function tick() {

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)]);

    // push the accumulated count onto the back, and reset the count
    data.push(Math.random()*10);
    count = 0;

    // redraw the line
    svg.select(".line")
        .attr("d", line)
        .attr("transform", null);

    // slide the x-axis left
    axis.transition()
        .duration(duration)
        .ease("linear")
        .call(x.axis);

    // slide the line left
    path.transition()
        .duration(duration)
        .ease("linear")
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
        .each("end", tick);

    // pop the old data point off the front
    data.shift();

}

Answer 1

你可能想看看: D3 Real-Time streamgraph(图形数据可视化),

特别是答案的链接:http: //bost.ocks.org/mike/path/

总的来说,我看到了两种处理垂直过渡问题的方法:

• 过采样在实际点之间有一些线性插值,点之间的间隔越小,垂直过渡看起来就越"水平"(但缺点是你会得到很多"假"点,这可能是不可接受的,取决于使用图表)
• 通过在末尾添加来扩展图表,并在左边翻译图表,确保在删除它之前不会显示仍然可用的左侧部分(剪切它或做任何其他技巧),这是最好的,并且上面提到的解决方案确实如此那