实时折线图与nvd3.js

Question

实时折线图与nvd3.js

javascriptd3.jsreal-timetransitionnvd3.js

36

我正在尝试使用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();

}

- Christopher Chiche

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandre Kaspar · Accepted Answer

您可能想查看： D3实时流图（图形数据可视化），尤其是答案的链接： http://bost.ocks.org/mike/path/ 一般来说，我看到处理垂直转换问题的两种方法：

通过过采样，在真实点之间进行一些线性插值，点之间的时间间隔越短，垂直转换看起来越“水平”。但缺点是会得到很多“虚假”点，这可能根据图表的使用是不可接受的。
通过在结尾添加扩展图表并将图表向左移动，确保仍然可用的左侧部分在删除它之前不显示出来（通过剪辑或执行任何其他技巧），这是最好的方法。上述解决方案就是这样做的。