使用 d3-grid js 的性能很慢答案

【问题标题】：Performance slow on using d3-grid js使用 d3-grid js 的性能很慢
【发布时间】：2016-08-29 00:12:00
【问题描述】：

我需要用矩形表示每个数据。我使用下面的网格布局 http://bl.ocks.org/herrstucki/5684816 我的数据真的很大，大约在 1700 左右。当我尝试绘图时，它需要很长时间，有时浏览器会挂起。这是我的 plunker https://plnkr.co/edit/Xzr3RoQlm7DSiIuexmFz 请帮忙

<!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>

【问题讨论】：

你真正想在这里做什么？您的代码一次添加一个矩形，重新绑定数据，创建过渡以将其移动到位并设置其不透明度，并立即执行下一个和下一个，等等......如果您摆脱所有这些疯狂，添加1700个矩形并显示出来，完全没有滞后：plnkr.co/edit/gLyTzvBVvLfwX7hOOeyW?p=preview
谢谢马克。我想向用户展示数据正在被一一追加，而不是一次等待所有 1700 个矩形，但正如您所说的，这可能就是原因，性能很慢。

标签： d3.js

【解决方案1】：

在开始下一轮之前，您需要等待一组更新和转换完成。借用from this question 并将其应用于您的代码：

<!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="http://rawgit.com/interactivethings/d3-grid/master/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)");


var rectC = 1;
rects.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);
  
  var transitions = 0;
  rect
    .transition()
    .duration(50)
    .attr("width", rectGrid.nodeSize()[0])
    .attr("height", rectGrid.nodeSize()[1])
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
    .style("opacity", 1)
    .each( "start", function() {
        transitions++;
    }).each( "end", function() {
        if( --transitions === 0 ) {
          rects.push({});
          rectC += 1;
          if (rectC < 1700) update();
        }
    });

  rect.exit().transition()
    .style("opacity", 1e-6)
    .remove();
}

update();

</script>

【讨论】：