CODEWITHSUNDEEP
d3.js
user123
user123

Reputation: 163

Performance slow on using d3-grid js

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>

Upvotes: 1

Views: 941

Answers (1)

Mark
Mark

Reputation: 108567

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>

Upvotes: 2

Related Questions