gpt4 book ai didi

javascript - 绘制数据1×1 D3 js

转载 作者:行者123 更新时间:2023-11-28 07:44:20 25 4
gpt4 key购买 nike

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

最佳答案

将答案扩展到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

关于javascript - 绘制数据1×1 D3 js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27616439/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com