借助人力车和d3.js在折线图上绘制实时数据

我想在人力车和d3.js的帮助下在折线图上制作实时动态图形，它总是提供新的数据而不刷新整体页。在下面的例子中，他们在随机数据上构建图形。但是在这个问题中数据并不新鲜，只有刷新浏览器才会得到新鲜数据Please see this link。对于阿贾克斯请求，我使用这里的参考please see it 借助人力车和d3.js在折线图上绘制实时数据

我复制下面的整个代码。我想制作可移动的图形，就像flot一样实时更新一些图形，但不想使用flot，而是使用人力车。

<!doctype> 
<head> 
     <title>rickShaw greaph examples</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link type="text/css" rel="stylesheet" href="../src/css/graph.css"> 
     <link type="text/css" rel="stylesheet" href="../src/css/legend.css"> 
     <link type="text/css" rel="stylesheet" href="../src/css/detail.css"> 
    <link type="text/css" rel="stylesheet" href="css/lines.css"> 

    <script src="../vendor/d3.v3.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

    <script src="../rickshaw.js"></script> 
</head> 
<body> 

<div id="chart_container" style="margin:0px auto;width:660px;"> 
    <div id="chart"></div> 
     <div id="legend_container"> 
      <div id="smoother" title="Smoothing"></div> 
      <div id="legend"></div> 
     </div> 
     <div id="slider"></div> 
</div> 

<script> 
     // set up our data series with 50 random data points 
     var seriesData = [ [], [], [] ]; 
     var random = new Rickshaw.Fixtures.RandomData(150); 

     for (var i = 0; i < 150; i++) { 
      random.addData(seriesData); 
     } 

var ajaxGraph = new Rickshaw.Graph.Ajax({ 

    element: document.getElementById("chart"), 
    width: 400, 
    height: 200, 
    renderer: 'line', 
    series: [ 
     { 
      name: 'New York', 
         data: seriesData[0], 
      color: '#c05020', 
     }, { 
      name: 'London', 
         data: seriesData[0], 
      color: '#30c020', 
     }, { 
      name: 'Tokyo', 
         data: seriesData[0], 
      color: '#6060c0' 
     } 
    ] 
}); 
ajaxGraph.render(); 

var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
      graph: graph 
     }); 

     var legend = new Rickshaw.Graph.Legend({ 
      graph: graph, 
      element: document.getElementById('legend') 

     }); 

     var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({ 
      graph: graph, 
      legend: legend 
     }); 


     var axes = new Rickshaw.Graph.Axis.Time({ 
      graph: graph 
     }); 
     axes.render(); 
</script> 

</body>

来源

2015-06-20 geeks

要在d3图表中获取实时数据，您需要在JSON URL上实现轮询脚本，或者使用websockets进行实时通信。

轮询脚本会每隔X秒查询一次JSON URL，并根据需要执行d3添加/更新/删除模式。

使用websockets，您可以维护与API的持续连接，并且服务器在更新数据时向连接的客户端发送消息。这又会调用d3添加/更新/删除模式。

SO例如与网络插口：

https://stackoverflow.com/a/13694422/2490989

轮询例如：

http://www.devixgroup.com/blog/2015/01/using-ajax-polling-with-d3-js-eventdrops-project/

来源

2015-06-20 06:10:37 spanndemic

感谢回复，你可以给我任何实时的例子或任何相关的链接.. – geeks

我已经使用了两种方法，但不幸的是，它们是大公司的专有原型：/ websocket示例在SO上：http://stackoverflow.com/questions/13672490/real-time-data-with-d3和pol ling示例：http://www.devixgroup.com/blog/2015/01/using-ajax-polling-with-d3-js-eventdrops-project/ – spanndemic

借助人力车和d3.js在折线图上绘制实时数据

回答

相关问题