圖紙數據1 x 1 D3 js

Question

我正在嘗試按1繪制數據點。由於其22.000的某些數據點，我希望它們不會彼此同時繪制。

有什么建議怎么做嗎？ 我似乎無法弄清楚。

PS。 用於運行所有數據的代碼顯然不存在，因為我不知道如何。

// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);


// load data
d3.csv("giants.csv", function(error, data) {

  // draw dots
     svg.selectAll(".dot")
      .data(data)
    .enter().append("circle" )
      .attr("class",  function(d) {
            var c = " ";
                    c="dot " + d["last"];

          return c;
        })
      .attr("r", 1.5)
      .attr("cx", xMap)
      .attr("cy", yMap)

      .style("fill", function(d) { return color(cValue(d));}) 
      .on("mouseover", function(d) {


          tooltip.transition()
               .duration(500)


               .style("opacity", .9);
          tooltip.html("<img class='playerfoto' src=img/"+d["last"]+".png><img class='playerfoto'src='img/sf.png'><br/>" +" "+ d["last"]+", "+ d["first"]+ "<br/><br/>" +"Pitch made on: "+d["date"]+"<br/> "+"Batter faced : " + d["batter_last"] +", "+ d["batter_first"]+
              "<br/> (" + xValue(d)+ ", " + yValue(d) + ")")


               .style("left", (  20) + "px")
               .style("top", (  20) + "px");

      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

Answer 1

擴展這個類似問題的答案：

我認為您必須對數據進行分塊並使用setInterval或setTimeout分組顯示。 這將為UI提供一些喘息的空間，使它們在中間跳躍。

基本方法是：1）對數據集進行分塊2）分別渲染每個塊3）跟蹤每個渲染組

您可以使用Javascript setInterval函數在不同的時間間隔調用更新代碼，並將更新更改為僅繪制數據的單個行（例如100個數據塊）對於單個元素：

svg.append("circle").datum(dataset[currentIndex])
      .attr( //...all the other stuff, unchanged

以這種方式更改它只會添加一個以dataset[currentIndex]作為其基准的圓，而無需計算選擇和數據之間的任何連接。

這是我作為演示創建的一個小示例JSFiddle。

請注意， setInterval最小間隔限制為4毫秒（在某些瀏覽器中甚至更多），因此，一次限制繪制250個元素時，一次繪制數千個元素將花費大量時間。 您可以做的是在每次迭代時繪制“塊”，例如每次迭代繪制20個元素。 這樣，您可以繪制1000 / interval * chunksize元素/秒，例如，interval = 20和chunksize = 20，即1000個元素/秒。 如果您正確地調整兩個參數（時間間隔和塊大小），則沒有人能夠區分每個元素還是一個塊

這是一個按塊繪制的JSFiddle