相关疑难解决方法(0)

使用D3生成"实时"图表

我最近开始学习使用D3.js框架,虽然看起来它的设计完全符合我的要求,但我找不到一个简单的"实时"更新图示例.

我正在寻找类似于线图的东西,随着新数据的推出而更新.通过使用"最后看到的"时间戳或其他一些AJAX-y方法命中json url可以获得新数据.

编辑:答案的D3部分在这里:

http://bost.ocks.org/mike/path/

现在,人们如何建议从服务器获取新数据到客户端?

d3.js

66
推荐指数
3
解决办法
7万
查看次数

与nvd3.js的实时线图

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

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

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

d3.select('#chart svg')
    .datum(data)
    .transition().duration(duration)
    .call(chart);
Run Code Online (Sandbox Code Playgroud)

现在,我已经能够使用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(" …
Run Code Online (Sandbox Code Playgroud)

javascript transition real-time d3.js nvd3.js

36
推荐指数
1
解决办法
2万
查看次数

标签 统计

d3.js ×2

javascript ×1

nvd3.js ×1

real-time ×1

transition ×1