HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Displaying overlapping blocks using d3.js

Submitted by: @import:stackexchange-codereview··
0
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

Solution

From a once over:

  • 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.