Question

我正在尝试用1绘制数据点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

将答案扩展为this similar question：

我认为您必须使用setInterval或setTimeout将数据分块并显示在组中。这将为UI提供一些在中间跳跃的喘息空间。

基本方法是：1）数据集块2）分别渲染每个块3）跟踪每个渲染组

您可以使用Javascript setInterval函数以不同的时间间隔调用更新代码，并将更新更改为仅绘制一行数据（例如，100行chuncks）对于单个元素：

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个元素/秒。你可以做的是画＆＃34;块＆＃34;在每次迭代中，每次迭代20个元素。这样你可以绘制1000 / interval * chunksize元素/秒，例如interval = 20和chunksize = 20,1000个元素/秒。如果你正确调整两个参数（interval和chunksize），没有人能够区分元素或chunk chunk

Here is a JSFiddle that draws by chunks

绘制数据1乘1 D3 js

1 个答案: