patternjavascriptMinor
Displaying overlapping blocks using d3.js
Viewed 0 times
blocksoverlappingusingdisplaying
Problem
The code takes in nodes with different start time as input and assigns the position such that they will not overlap. As I have coded with too many loops and conditions. Can anyone review the code and help me to make it efficient? Please do review the algorithm to assign positions to the rectangular blocks.
```
var margin = {top: 50, right: 20, bottom: 20, left: 10},
w = 400 - margin.left - margin.right,
h = 200 - margin.top - margin.bottom;
var nodes = [{"id":0, "start":10 , "stop":40, "total":30},
{"id":1, "start":40 , "stop":80, "total":40},
{"id":2, "start":100 , "stop":150, "total":50},
{"id":3, "start":120 , "stop":150, "total":30},
{"id":4, "start":140 , "stop":160, "total":20}];
var flag_move = 1;
svg = d3.select("#chart1").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
nodes.forEach(function(d){
d.y = 30 * d.id;
});
svg.append("svg:g")
.attr("class","nodes")
.selectAll("rect")
.data(nodes)
.enter().append("svg:rect")
.style("fill", "blue")
.style("opacity",0.5)
.attr("width",function(d) { return (d.total); })
.attr("height", "20")
.attr("x",function(d) { return (d.start); })
.attr("y",function(d) { return (d.y); });
// different approach
updated_pos_mat = [];
nodes.forEach(function(d){
updated_pos_mat.push([d.id]);
});
//pass1
var pass = updated_pos_mat.length - 1;
while ( pass != 0){
console.log( "At " + (3-pass) + " pass");
var removed = 0;
for( var i=1;ij && (i-j == 1)){
if((temp_ival.length == 1) && (temp_jval.leng
```
var margin = {top: 50, right: 20, bottom: 20, left: 10},
w = 400 - margin.left - margin.right,
h = 200 - margin.top - margin.bottom;
var nodes = [{"id":0, "start":10 , "stop":40, "total":30},
{"id":1, "start":40 , "stop":80, "total":40},
{"id":2, "start":100 , "stop":150, "total":50},
{"id":3, "start":120 , "stop":150, "total":30},
{"id":4, "start":140 , "stop":160, "total":20}];
var flag_move = 1;
svg = d3.select("#chart1").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
nodes.forEach(function(d){
d.y = 30 * d.id;
});
svg.append("svg:g")
.attr("class","nodes")
.selectAll("rect")
.data(nodes)
.enter().append("svg:rect")
.style("fill", "blue")
.style("opacity",0.5)
.attr("width",function(d) { return (d.total); })
.attr("height", "20")
.attr("x",function(d) { return (d.start); })
.attr("y",function(d) { return (d.y); });
// different approach
updated_pos_mat = [];
nodes.forEach(function(d){
updated_pos_mat.push([d.id]);
});
//pass1
var pass = updated_pos_mat.length - 1;
while ( pass != 0){
console.log( "At " + (3-pass) + " pass");
var removed = 0;
for( var i=1;ij && (i-j == 1)){
if((temp_ival.length == 1) && (temp_jval.leng
Solution
From a once over:
Once you remove the
console.log()
//updated_pos_mat[j].push(nodes[temp_ival[0]].id);
temp_arr.reduce(
- From a readability perspective, you have too many 1 char variable names, and your indenting is a mess, making it hard to grok your code and find conceptual problems with the code.
Once you remove the
log() calls, the reduce() calls , the dead code and renamed the variables, you should definitely repost the code if it is still too slow.Context
StackExchange Code Review Q#31585, answer score: 2
Revisions (0)
No revisions yet.