藉助人力車和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在折線圖上繪製實時數據

回答

相關問題