1
我正在開發一些使用D3.js的圖,但由於我對框架還不是很熟悉,所以我面臨一些問題。如何在放大時在D3.js上繪製更多數據點?
我的主要要求是繪製價格X時間圖,我的數據點可能在一天內超過一百萬個數據點。所以我的想法是使用類似的方法來谷歌地圖。每次放大時,地圖都會從服務器獲取更多數據並顯示它。我會通過抽出幾個點來繪製圖表,當你放大時,我會採取更多的觀點並使圖表更清晰。我怎樣才能存檔這個解決方案?
我正在開發一些使用D3.js的圖,但由於我對框架還不是很熟悉,所以我面臨一些問題。如何在放大時在D3.js上繪製更多數據點?
我的主要要求是繪製價格X時間圖,我的數據點可能在一天內超過一百萬個數據點。所以我的想法是使用類似的方法來谷歌地圖。每次放大時,地圖都會從服務器獲取更多數據並顯示它。我會通過抽出幾個點來繪製圖表,當你放大時,我會採取更多的觀點並使圖表更清晰。我怎樣才能存檔這個解決方案?
通過使用縮放作爲模數,可以將繪製的數據點的數量與縮放因子相互關聯。例如,假設你的變焦有10級與10是最縮小(在谷歌地圖中的地球)和1個最詳細的視圖(單家),並假設該功能:
var scatter = d3.select("#svg").selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cy", function(d) {
return y(d.y);
})
.attr("cx", function(d) {
return x(d.x);
})
.attr("r", function(d, i) {
return i % zoom == 0 ? 3 : 0; // <== This is _the_ line.
});
標線變通過數據點,並且只有在i % zoom == 0
繪製的圓圈半徑爲3,所有其他圓圈爲0,因此不可見。
當然,這仍然會經歷所有可用的數據點,但我認爲在d3中有類似.defined()
的內容以避免獲取數據點。那裏可以使用與上面相同的功能。
感謝@保羅給了我的問題的方向,但我想獲得數據點,因爲我放大,你知道任何技巧要做到這一點?我的問題是我的數據集太大,無法傳輸,也無法同時進行繪圖,所以我想「跳過」幾個點,並在達到縮放的最後一級時僅顯示所有點。 – pedroct92
單獨使用D3.js(imho)無法高效完成,但需要ajax請求,因此服務器可以準備要繪製的數據並僅將這些數據點傳輸到客戶端的瀏覽器。 – Paul