如何在放大時在D3.js上繪製更多數據點？

Question

我正在開發一些使用D3.js的圖，但由於我對框架還不是很熟悉，所以我面臨一些問題。

我的主要要求是繪製價格X時間圖，我的數據點可能在一天內超過一百萬個數據點。所以我的想法是使用類似的方法來谷歌地圖。每次放大時，地圖都會從服務器獲取更多數據並顯示它。我會通過抽出幾個點來繪製圖表，當你放大時，我會採取更多的觀點並使圖表更清晰。我怎樣才能存檔這個解決方案？

Answer 1

通過使用縮放作爲模數，可以將繪製的數據點的數量與縮放因子相互關聯。例如，假設你的變焦有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()的內容以避免獲取數據點。那裏可以使用與上面相同的功能。