图纸数据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