用D3生成一個「活動」圖表

Question

我最近開始學習使用D3.js框架，雖然它看起來像是被設計成完全符合我的要求，但我找不到一個簡單的例子「現場」更新圖表。

我正在尋找類似折線圖的東西，當新數據變爲可用時更新。新的數據可以通過點擊帶有「上次看到」時間戳或其他AJAX-y方法的json url來獲得。

編輯：答案的D3部分是在這裏：

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

現在，人們如何建議從服務器到客戶端獲取新的數據？

Answer 1

這只是兩個例子：

1. 可以使客戶端定期拉來自服務器的新數據（即使用一些AJAX調用）。
2. 如果瀏覽器支持它，您可以打開一個面向服務器的websocket，這樣服務器可以在推送新數據後立即可用。

選擇一種或另一種取決於許多變量：你希望有多少個連接做的，什麼是數據的更新速度，哪些瀏覽您計劃支持，等等。

在任何情況下，d3.js庫不參與你怎麼得到的數據，而是在怎麼顯示他們。

Answer 2

本教程可以幫助你很多來創建一個實時線圖：http://bost.ocks.org/mike/path/

我想補充一些更多的評論：當你做一個

異步數據

實時圖形，你經常得到的數據異步，因此你不知道每個「點」之間的確切時間。

• 爲線，因爲在本教程中介紹的line不關心你是幸運的。
• 對於持續平穩過渡的效果來說，它更棘手。關鍵是將持續時間設置爲最後一幀和上一幀之間的時間。由於網絡幾乎總是具有相同的吞吐量，這也是下一個近似值。

Y軸

在常規的線圖，很容易確定在y域。然而，對於實時數據，y值通常會超出限制。這就是爲什麼我會建議在每次迭代時調用一個函數來設置y域。您也可以創建一個邊界框。

性能

由於數據總是添加你可能要很細心的，你必須刪除你不再使用的值的事實，否則你的數據會越來越重，在整個動畫可能會崩潰。

Answer 3

也許這個插件也可能很有趣：Cubism。

Cubism.js是D3的插件用於可視化的時間序列。使用立體主義到 構建更好的實時儀表板，從Graphite，Cube 和其他來源提取數據。 Cubism可以在Apache許可證下的 GitHub上獲得。

---

編輯：

另一interessant項目可以Rickshaw這也充分利用了D3。

JavaScript工具包，用於創建交互式的實時圖形

見這個例子：Random Data in the Future