Reputation: 163
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
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