Performance slow on using d3-grid js

Question

I need to represent each data in rectangle. I used grid layout using the below one http://bl.ocks.org/herrstucki/5684816 My data is really huge its around 1700. When i tries to plot, its taking long time and sometime the browser hangs. Here is my plunker https://plnkr.co/edit/Xzr3RoQlm7DSiIuexmFz Please help

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

What are you really trying to do here? Your code is adding a single rect at a time, rebinding the data, creating a transition to move it into place and set it's opacity and immediately doing the next one and the next one, etc... If you get rid of all that craziness, add 1700 rects and display it, there's no lag at all: https://plnkr.co/edit/gLyTzvBVvLfwX7hOOeyW?p=preview — Mark, May 03 '16 at 19:52
Thanks Mark. I want to show the user that data is getting appended one by one, instead of waiting for all the 1700 rect at a time but as you are saying may be thats the reason, the performance is slow. — user123, May 03 '16 at 20:34

score 2 · Accepted Answer · edited May 23 '17 at 12:16

You need to wait for one set of updates and transitions to finish before starting the next round. Borrowing from this question and applying it to your code:

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

Performance slow on using d3-grid js

1 Answers1