D3.js 使用d3 grid js时性能下降_D3.js

D3.js 使用d3 grid js时性能下降

d3.js

D3.js 使用d3 grid js时性能下降,d3.js,D3.js,我需要用矩形表示每个数据。我使用了下面的网格布局我的数据非常庞大，大约在1700年左右。当我尝试绘图时，需要很长时间，有时浏览器会挂起。这是我的钱包，请帮忙 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: Helvetica; font-size: 10px; } .point, .rect { fill: #222; } </style> <

我需要用矩形表示每个数据。我使用了下面的网格布局我的数据非常庞大，大约在1700年左右。当我尝试绘图时，需要很长时间，有时浏览器会挂起。这是我的钱包，请帮忙

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Helvetica;
  font-size: 10px;
}
.point, .rect {
  fill: #222;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-grid.js"></script>
<script>


var rects = [];

var width = 960,
    height = 500;


var rectGrid = d3.layout.grid()
  .bands()
  .size([360, 360])
  .padding([0.1, 0.1]);

var svg = d3.select("body").append("svg")
  .attr({
    width: width,
    height: height
  })
.append("g")
  .attr("transform", "translate(0,0)");

for(var i=0; i<1700; i++){
  push();
}

function update() {
    var rect = svg.selectAll(".rect")
    .data(rectGrid(rects));
  rect.enter().append("rect")
    .attr("class", "rect")
    .attr("width", rectGrid.nodeSize()[0])
    .attr("height", rectGrid.nodeSize()[1])
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
    .style("opacity", 1e-6);
  rect.transition()
    .attr("width", rectGrid.nodeSize()[0])
    .attr("height", rectGrid.nodeSize()[1])
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
    .style("opacity", 1);
  rect.exit().transition()
    .style("opacity", 1e-6)
    .remove();
}

function push() {
  rects.push({});
  update();
}

</script>


身体{
字体系列：Helvetica；
字体大小：10px；
}
.point，.rect{
填充：#222；
}
var rects=[]；
可变宽度=960，
高度=500；
var rectGrid=d3.layout.grid（）
.乐队（）
.尺寸（[360360]）
.填充（[0.1,0.1]）；
var svg=d3.选择（“正文”）.追加（“svg”）
艾特先生({
宽度：宽度，
高度：高度
})
.附加（“g”）
.attr（“转换”、“翻译（0,0）”）；
对于（var i=0；i，在开始下一轮之前，您需要等待一组更新和转换完成。借用并将其应用于您的代码：


身体{
字体系列：Helvetica；
字体大小：10px；
}
.point，.rect{
填充：#222；
}
var rects=[]；
可变宽度=960，
高度=500；
var rectGrid=d3.layout.grid（）
.乐队（）
.尺寸（[360360]）
.填充（[0.1,0.1]）；
var svg=d3.选择（“正文”）.追加（“svg”）
艾特先生({
宽度：宽度，
高度：高度
})
.附加（“g”）
.attr（“转换”、“翻译（0,0）”）；
var-rectC=1；
rects.push（{}）；
函数更新（）{
var rect=svg.selectAll（“.rect”）
.数据（rectGrid（rects））；
rect.enter（）.append（“rect”）
.attr（“类”、“rect”）
.attr（“宽度”，rectGrid.nodeSize（）[0]）
.attr（“高度”，rectGrid.nodeSize（）[1]）
.attr（“transform”，函数（d）{return“translate”（+（d.x）+）”，“+d.y+”）；}）
.样式（“不透明度”，1e-6）；
var转换=0；
直肠
.transition（）
.期限（50）
.attr（“宽度”，rectGrid.nodeSize（）[0]）
.attr（“高度”，rectGrid.nodeSize（）[1]）
.attr（“transform”，函数（d）{return“translate”（+（d.x）+）”，“+d.y+”）；}）
.style（“不透明度”，1）
.每个（“开始”，函数（）{
转换++；
}).每个（“结束”，函数（）{
如果（--transitions==0）{
rects.push（{}）；
rectC+=1；
如果（rectC<1700）更新（）；
}
});
rect.exit（）.transition（）
.样式（“不透明度”，1e-6）
.remove（）；
}
更新（）；
你到底想在这里做什么？你的代码是一次添加一个矩形，重新绑定数据，创建一个转换以将其移动到位并设置其不透明度，然后立即执行下一个和下一个，等等。如果你摆脱了所有的疯狂，添加1700个矩形并显示它，就不会有任何延迟：谢谢Mark。我想要向用户显示数据正在一个接一个地追加，而不是一次等待所有1700个rect，但正如您所说的，这可能是原因，性能很慢。