javascript - 绘制数据1×1 D3 js

Question

我正在尝试一一绘制数据点。由于有 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

将答案扩展到this similar question :

I think you'll have to chunk your data and display it in groups using setInterval or setTimeout. This will give the UI some breathing room to jump in the middle.

The basic approach is: 1) chunk the data set 2) render each chunk separately 3) keep track of each rendered group

您可以使用 Javascript setInterval函数以不同的时间间隔调用更新代码，并将更新更改为仅绘制单行数据(或例如 100 行 block ) 对于单个元素:

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

以这种方式更改它只是添加一个以dataset[currentIndex]作为基准的圆圈，而不计算选择和数据之间的任何连接。

Here is a small example JSFiddle I've created as a demo.

请注意，setInterval 的最小间隔限制为 4 毫秒(在某些浏览器上甚至更长)，因此逐个绘制数千个元素将花费大量时间，因为元素限制为 250 个/第二。您可以做的是在每次迭代时绘制“ block ”，例如每次迭代 20 个元素。这样，您可以每秒绘制 1000/interval*chunksize 元素，例如，使用interval=20 和 chunksize=20，每秒绘制 1000 个元素。如果你正确调整两个参数(间隔和 block 大小)，没有人能够区分逐个元素或逐个 block

Here is a JSFiddle that draws by chunks