Last active
August 29, 2015 14:02
-
-
Save jannakha/ec74b317ef5fb74efaa7 to your computer and use it in GitHub Desktop.
Revisions
-
jannakha revised this gist
Jun 5, 2014 . 1 changed file with 23 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -13,7 +13,7 @@ {device1:'B1-3C-03-06-20', port1:'11-12', front1:0, device2:'B1-3C-03-06-41', port2:'5-6', front2:1, }, {device1:'B1-3C-03-06-41', port1:'5-6', front1:0, device2:'B1-3C-03-05-41', port2:'5-6', front2:0, }, {device1:'B1-3C-03-05-41', port1:'5', front1:1, device2:'B1-3C-03-05-23', port2:'1', front2:1, }, {device1:'B1-3C-03-05-23', port1:'', front1:0, device2:'', port2:'', front2:0, }] //last empty device is added for auto draw //offset x, y for the whole thing var barX = 70; @@ -22,7 +22,7 @@ //default size of things var barHeight = 40; //rack height var barWidth = 250; //rack width var gap = 35; //gap between racks var adjLine = 45; //length of incoming-outgoing line var svgContainer = d3.select("#graph-area"). @@ -90,13 +90,14 @@ return barY + i * (barHeight + gap) + barHeight/2; }) .attr("x2", function (d, i) { return (i==0 || (jsonRects[i-1].port2 != '' && jsonRects[i-1].front2 == 1)) ? barX : barX + barWidth + adjLine; }) .attr("y2", function (d, i) { return barY + i * (barHeight + gap) + barHeight/2; }) .style("fill", function(d, i) { return "lightgrey"; }) .style("stroke", function(d, i) { return "red"; }) .style("display", function(d, i) { return (i == 0) ? "none" : ""}); //incoming connection not displayed on first element only //add outgoing label var outPortLabel = svgContainer @@ -133,6 +134,25 @@ .text(function(d, i) { return (i == 0) ? "" : jsonRects[i-1].port2;}) .attr("fill", "red"); //add connecting lines var connLines = svgContainer.selectAll("connection-line") .data(jsonRects) .enter() .append("svg:line") .attr("x1", function (d) { return (d.port1 !='' && d.front1 == 1) ? barX-adjLine : barX + barWidth + adjLine ; }) .attr("y1", function (d,i) { return barY + i * (barHeight + gap) + barHeight/2; }) .attr("x2", function (d, i) { return (i==0 || (d.port2 != '' && d.front2 == 1)) ? barX-adjLine : barX + barWidth + adjLine; }) .attr("y2", function (d,i) { return barY + (i+1) * (barHeight + gap) + barHeight/2; }) .style("fill", function(d) { return "lightgrey"; }) .style("stroke", function(d) { return "green"; }) .style("display", function(d) { return d.port1 == '' ? "none" : ""}); </script> </body> -
Jun 5, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,139 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <div id="graph-area"></div> <script type="text/javascript"> var jsonRects =[ {device1:'B1-3C-03-06-20', port1:'11-12', front1:0, device2:'B1-3C-03-06-41', port2:'5-6', front2:1, }, {device1:'B1-3C-03-06-41', port1:'5-6', front1:0, device2:'B1-3C-03-05-41', port2:'5-6', front2:0, }, {device1:'B1-3C-03-05-41', port1:'5', front1:1, device2:'B1-3C-03-05-23', port2:'1', front2:1, }, {device1:'B1-3C-03-05-23', port1:'', front1:0, device2:'', port2:'', front2:0, }] //offset x, y for the whole thing var barX = 70; var barY = 25; //default size of things var barHeight = 40; //rack height var barWidth = 250; //rack width var gap = 30; //gap between racks var adjLine = 45; //length of incoming-outgoing line var svgContainer = d3.select("#graph-area"). append("svg:svg"). attr("width", 400). attr("height", 300); //add rectangle var rects = svgContainer .selectAll("rect") .data(jsonRects) .enter() .append("svg:rect") .attr("x", function (d) { return barX; }) .attr("y", function (d,i) { return barY + i * (barHeight + gap); }) .attr("width", function (d) { return barWidth; }) .attr("height", function (d) { return barHeight; }) .style("fill", function(d) { return "lightgrey"; }) .style("stroke", function(d) { return "black"; }); //add rack label var rackLabel = svgContainer .selectAll("rack-label") .data(jsonRects) .enter() .append("svg:text") .attr("x", function(d, i) { return barX + barWidth; }) .attr("y", function(d, i) { return barY + i * (barHeight + gap); }) .attr("dx", -barWidth/2) .attr("dy", barHeight/2) .attr("text-anchor", "middle") .text(function(d) { return d.device1;}) .attr("fill", "black"); //add outgoing lines var outLines = svgContainer.selectAll("front-out-line") .data(jsonRects) .enter() .append("svg:line") .attr("x1", function (d) { return (d.port1 !='' && d.front1 == 1) ? barX - adjLine : barX + barWidth; }) .attr("y1", function (d,i) { return barY + i * (barHeight + gap) + barHeight/2; }) .attr("x2", function (d) { return (d.port1 !='' && d.front1 == 1) ? barX : barX + barWidth + adjLine ; }) .attr("y2", function (d,i) { return barY + i * (barHeight + gap) + barHeight/2; }) .style("fill", function(d) { return "lightgrey"; }) .style("stroke", function(d) { return "green"; }) .style("display", function(d) { return d.port1 == '' ? "none" : ""}); //add incoming lines var inLines = svgContainer.selectAll("front-in-line") .data(jsonRects) .enter() .append("svg:line") .attr("x1", function (d, i) { return (i==0 || (jsonRects[i-1].port2 != '' && jsonRects[i-1].front2 == 1)) ? barX - adjLine : barX + barWidth; }) .attr("y1", function (d, i) { return barY + i * (barHeight + gap) + barHeight/2; }) .attr("x2", function (d, i) { return (i==0 || (jsonRects[i-1].port2 != '' && jsonRects[i-1].front2 == 1)) ? barX : barX + barWidth + adjLine ; }) .attr("y2", function (d, i) { return barY + i * (barHeight + gap) + barHeight/2; }) .style("fill", function(d, i) { return "lightgrey"; }) .style("stroke", function(d, i) { return "red"; }) .style("display", function(d, i) { return (i == 0) ? "none" : ""}); //incoming connection not displayed on first element only //add outgoing label var outPortLabel = svgContainer .selectAll("out-port-label") .data(jsonRects) .enter() .append("svg:text") .attr("x", function (d) { return (d.port1 !='' && d.front1 == 1) ? barX - adjLine : barX + barWidth; }) .attr("y", function (d,i) { return barY + i * (barHeight + gap); }) .attr("dx", adjLine/2) .attr("dy", barHeight/3) .attr("text-anchor", "middle") .text(function(d) { return d.port1;}) .attr("fill", "green"); //add outgoing label var outPortLabel = svgContainer .selectAll("in-port-label") .data(jsonRects) .enter() .append("svg:text") .attr("x", function (d, i) { return (i == 0 || jsonRects[i-1].port2 !='' && jsonRects[i-1].front2 == 1) ? barX - adjLine : barX + barWidth; }) .attr("y", function (d,i) { return barY + i * (barHeight + gap); }) .attr("dx", adjLine/2) .attr("dy", barHeight/3) .attr("text-anchor", "middle") .text(function(d, i) { return (i == 0) ? "" : jsonRects[i-1].port2;}) .attr("fill", "red"); </script> </body> </html>