Skip to content

Instantly share code, notes, and snippets.

@explunit

explunit/README.md

Created July 13, 2013 01:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save explunit/5988971 to your computer and use it in GitHub Desktop.
Save explunit/5988971 to your computer and use it in GitHub Desktop.
Download ZIP
Use Inkscape shapes in D3.js tree diagram
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.nodelink {
fill: none;
stroke: #ccc;
stroke-width: 4.5px;
}
</style>
</head>
<body>
<!-- this came from Open Clip Art imported to Inkscape-->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="800"
height="600"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="network.svg">
<defs>
<g id="webserver">
<g
transform="matrix(0.23427169,0,0,0.14550821,-126.67474,-75.799579)"
id="layer1-1"
inkscape:label="Calque 1">
<path
style="fill:#e1e1e1;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:3.75;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 597.50036,536.7637 15,-15 50,0 15,15 0,120 -80,0 z m 0,0"
id="path1028"
inkscape:connector-curvature="0" />
<path
style="fill:#bdbdbd;fill-opacity:1;fill-rule:evenodd;stroke:#9c9c9c;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 605.00036,539.2637 12.5,-12.5 40,0 12.5,12.5 z m 0,0"
id="path1030"
inkscape:connector-curvature="0" />
<path
style="fill:#bdbdbd;fill-opacity:1;fill-rule:evenodd;stroke:#9c9c9c;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
d="m 606.25036,541.7637 62.5,0 c 0.6885,0 1.25,0.55663 1.25,1.25 l 0,107.5 c 0,0.6885 -0.5615,1.25 -1.25,1.25 l -62.5,0 c -0.69337,0 -1.25,-0.5615 -1.25,-1.25 l 0,-107.5 c 0,-0.69337 0.55663,-1.25 1.25,-1.25"
id="path1032"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:3.75;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
d="m 611.25036,549.2637 52.5,0 c 0.6885,0 1.25,0.55663 1.25,1.25 l 0,12.5 c 0,0.68848 -0.5615,1.25 -1.25,1.25 l -52.5,0 c -0.69337,0 -1.25,-0.56152 -1.25,-1.25 l 0,-12.5 c 0,-0.69337 0.55663,-1.25 1.25,-1.25"
id="path1034"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:3.75;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
d="m 611.25036,571.7637 52.5,0 c 0.6885,0 1.25,0.55663 1.25,1.25 l 0,12.5 c 0,0.68848 -0.5615,1.25 -1.25,1.25 l -52.5,0 c -0.69337,0 -1.25,-0.56152 -1.25,-1.25 l 0,-12.5 c 0,-0.69337 0.55663,-1.25 1.25,-1.25"
id="path1036"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:3.75;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
d="m 633.75036,599.2637 30,0 c 0.6885,0 1.25,0.56153 1.25,1.25 l 0,10 c 0,0.68848 -0.5615,1.25 -1.25,1.25 l -30,0 c -0.6935,0 -1.25,-0.56152 -1.25,-1.25 l 0,-10 c 0,-0.68847 0.5565,-1.25 1.25,-1.25"
id="path1038"
inkscape:connector-curvature="0" />
<path
style="fill:#c51900;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
d="m 625.00036,605.5137 c 0,8.33495 -12.5,8.33495 -12.5,0 0,-8.33497 12.5,-8.33497 12.5,0"
id="path1040"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 622.50036,623.07228 5,0 0,27.5 -5,0 z m 0,0"
id="path1042"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 632.50036,623.07228 5,0 0,27.5 -5,0 z m 0,0"
id="path1044"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 642.50036,623.07228 5,0 0,27.5 -5,0 z m 0,0"
id="path1046"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 652.50036,623.07228 5,0 0,27.5 -5,0 z m 0,0"
id="path1048"
inkscape:connector-curvature="0" />
<path
style="fill:#9c9c9c;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 662.50036,623.126 5,0 0,27.5 -5,0 z m 0,0"
id="path1050"
inkscape:connector-curvature="0" />
<path
style="fill:url(#radialGradient5692);fill-opacity:1;fill-rule:evenodd;stroke:#262626;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 617.19761,644.49317 c 0,20.00978 -16.2207,36.23535 -36.23045,36.23535 -20.01465,0 -36.23537,-16.22557 -36.23537,-36.23535 0,-20.00974 16.22072,-36.23534 36.23537,-36.23534 20.00975,0 36.23045,16.2256 36.23045,36.23534"
id="path1052"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 561.84606,614.66898 1.74805,-1.20118 2.17773,-1.06445 3.11035,-1.08887 2.80762,-1.06445 3.68163,-0.4883 5.9961,-0.791 7.11425,0.5371 10,3.75 6.25,3.75 7.5,8.75 3.75,10 0.71777,13.24219 -1.95312,8.00781 -2.21678,5.36622 -1.02052,0.9375 -0.708,-0.9375 -0.0293,-1.963 0.80077,-2.18275 -0.43945,-2.046 -1.0791,-0.6885 -0.38575,-1.328 -0.60545,-1.21575 -1.0791,-0.245 -0.9375,-0.03 -1.35255,0.71775 -1.85057,2.0165 -2.12893,1.4355 -2.62695,-0.0825 -1.40625,-0.74225 -2.15332,-0.0875 -1.0791,-1.13275 -0.13675,-3.0664 -0.41505,-1.43075 -0.66405,-0.88875 0,-2.0995 0.0585,-1.90425 1.29395,-1.2695 0,-1.797 -0.30273,-1.792 0.249,-1.2745 1.43555,-1.9335 0.99608,-0.65925 1.10352,-1.38175 0.83008,-0.80075 1.35255,0.581 2.51465,-0.195 1.0205,-0.664 0.19525,-2.124 1.29882,-0.72275 0.6885,-1.21575 -0.0292,-1.32325 -0.9375,-1.1865 -0.7715,0.71775 -0.58105,0.88375 -0.91307,-0.27825 -0.74708,-1.0205 -0.7422,-0.03 -0.83007,0.8595 -0.61035,0.71775 -0.1905,0.74225 1.0205,1.46475 0.35645,0.4835 0.2245,0.4345 -0.13675,0.165 -0.20025,-0.1025 -0.26855,0.6495 -0.3418,0.2 -0.35158,-0.2 0.21,-0.61025 -0.1855,-0.51275 -0.49805,-0.503 -0.62987,-0.165 -1.0498,-0.03 -0.60548,0.1375 -1.34277,0.786 -0.67383,0.747 0.28808,1.24025 -0.0146,2.00675 -0.46875,0.8545 -1.35253,1.1035 -1.12305,-0.24 -0.96192,-1.13775 -0.17575,-1.211 0.72755,-0.8985 0.5371,-0.752 -0.27833,-0.62 -0.7959,-1.66025 -0.97167,-1.1865 -0.68848,0.27825 -0.52247,-0.36125 0.90822,-0.747 0.083,-1.0205 0.49805,-2.23625 0.9668,-1.04975 0.69335,-0.44425 -0.44432,-1.0205 0.21975,-1.13275 0.33202,-0.69325 -1.32812,-1.09875 -1.57228,-0.83 0.55178,3.33985 -1.02053,0.83 -1.0498,0.83 -1.13255,-1.93645 -1.26955,-0.9912 -0.52732,-1.54785 -0.16115,-1.51857 1.95802,-2.87108 -1.8506,-0.69337 -0.9375,-1.26953 -1.54785,0.47363 -1.57227,-0.33203 -2.0166,-1.1084 -1.43553,0 -1.30372,-1.07422 -1.9873,0.0244 -1.70898,1.1621 -4.42385,0.083 -2.13377,1.6748 -0.89845,0.13182 z m 0,0"
id="path1056"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 586.54331,626.876 0.37598,0.1325 0.6885,0.63975 0.8203,0.1325 1.18165,0.3125 0.4834,1.206 -0.53223,0.5175 -0.52247,0.459 -0.57618,-0.34175 0.0978,0.44425 -0.85447,0.26375 -0.7715,0.46875 0.0488,-1.504 0.625,-0.1325 0.36132,-0.1175 0.3955,0.42975 -0.29297,-0.75675 -0.64453,-0.035 -0.50782,-0.82025 -0.2783,-0.65425 z m 0,0"
id="path1058"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 577.13414,619.17093 0.1855,1.00575 0.83007,0.88875 0.3174,1.4015 0.2245,1.8115 -0.61522,2.2265 -0.41993,0.78125 -1.01075,0.34675 -0.59082,0.63475 -0.542,0.65925 -0.65428,0.835 -0.77637,0.01 -0.72265,-0.464 -0.67383,-0.74225 -0.3174,-0.73725 0.1025,-0.88876 0.28808,-0.37599 0.3174,-0.664 -0.18075,-0.82525 -0.77148,-1.71875 -1.12795,-0.9765 -1.09862,0.21 -0.63478,-0.1025 -0.7373,-1.162 -0.88867,-0.18 -0.49315,-0.454 -0.27833,-0.86925 2.26563,0.1175 1.97265,-0.30275 2.1045,-0.0575 1.4502,0.165 1.15722,-0.0146 z m 0,0"
id="path1060"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 580.54234,624.95218 0.62012,0.0925 1.14258,-0.0146 0.4541,0.52725 0.1075,0.6005 -0.90333,0.332 -0.9082,0.1475 -0.7373,0.53225 -0.46387,0.195 -0.36133,-0.6495 -0.0488,-0.6005 0.39063,-0.376 0.32227,-0.454 z m 0,0"
id="path1062"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 558.49644,616.82228 2.74902,-0.71275 1.08888,1.1085 0.75682,0.8545 -0.55175,1.13275 -0.9375,1.36725 0.52248,0.913 0.2245,0.96674 -0.64943,1.338 0.86915,0.747 0.66408,0.92776 0.078,0.98625 -0.249,1.13774 -0.24425,0.38575 -2.0752,2.08501 0.708,1.97749 0.4004,1.51851 1.66992,-1.03525 0.95215,-1.0205 0.80078,-1.28425 1.10352,1.07425 0.91308,0.76175 1.23047,0.0675 0.80078,0.98149 0.11225,1.51851 0.49317,0.86925 0.21,0.91299 0.76173,1.24026 0.7959,1.162 -0.83985,0.5225 -1.06445,-0.49326 -0.73243,-0.84474 -0.205,-0.625 -1.25975,-0.29775 -1.1426,-0.1125 -0.6787,0.371 0.5664,0.76175 0.86915,-0.03 0.76173,0.36125 0.46875,0.8545 0.039,0.9375 -0.6494,0.42975 -1.2549,-0.1125 -1.15723,0 -0.95702,1.09375 -1.76758,1.40625 -0.81542,1.9335 -1.8506,1.94825 -1.40625,0.9815 -0.11225,3.23242 -0.4834,0.165 -0.46875,-0.26375 -0.34668,-0.77625 -0.15125,-1.73825 -1.72362,-0.175 -0.77148,0.371 -1.17677,-0.332 -1.0205,0.664 -0.5127,1.4745 -0.30273,1.34275 0.71778,1.04975 3.0664,0.3175 -0.20025,1.65525 0,1.709 4.06737,3.83303 2.0215,0.786 0.71778,-0.55675 1.39647,0.69825 2.18263,-0.16 1.69432,-0.0925 1.5088,0.29775 2.32423,2.583 0.85937,0.34675 2.76365,-0.1425 2.2754,2.60255 1.6748,0.0244 0.97168,1.09375 1.00097,0.16 1.2549,-0.95225 2.08985,0.045 1.57713,0.625 0.53712,0.537 0.161,1.582 0.58105,1.11325 -0.83495,1.416 -0.166,1.6505 -0.53222,1.6015 -0.81055,1.13775 -1.74315,0.1425 -0.83985,0.32225 -0.97168,1.46475 -1.48925,1.90425 -2.88087,0.185 -5.26855,-0.625 -1.11328,-0.6835 -0.56152,-1.8995 -2.25098,-2.251 -2.76367,-0.69325 -1.5332,-2.62697 -1.6504,-0.46375 -0.69825,-1.23525 -0.92773,-0.8105 -0.32715,-1.372 0.41993,-2.36325 0.34667,-1.34775 -2.79785,-2.8662 -5.4004,-5.03418 -0.32225,-1.32325 -1.792,-0.7665 -1.11327,-1.46475 -0.13675,-1.94825 0,-2.256 -0.5371,-1.46 -1.55763,-0.32725 -0.3711,-2.50977 0.56153,-3.34473 1.08887,-1.2745 0.27833,-4.22852 1.58202,-2.60255 1.99708,-3.27148 0.1855,-1.09375 2.97362,-3.9502 0.9961,-2.64647 1.11815,-2.207 0.3711,-0.85925 z m 0,0"
id="path1064"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 556.98279,653.01858 0.75682,-0.50775 1.333,0.52725 1.00588,1.3525 1.35252,0.34175 0.34668,0.84949 0.50295,0 1.4453,0.36626 0.62012,1.07925 -1.83595,-0.16 -0.98632,-0.6885 -0.27343,-0.57125 -0.50782,0.254 -1.99218,-0.918 -1.5381,-1.01075 z m 0,0"
id="path1066"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 568.40366,656.29495 1.00588,-0.0925 0.91797,0.664 1.58203,0.18 1.14745,0.76175 -0.32225,0.80075 -1.37695,0.34675 -1.19143,-0.669 -0.68847,0.0675 -0.84473,-0.18 -0.30272,-0.98625 z m 0,0"
id="path1068"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 563.60876,620.18165 0.75683,-0.1075 0.50782,0.40025 0.2783,1.1085 0.4297,0.67375 -0.41505,0.4835 -0.81542,0.26375 -0.9668,0.332 -0.19525,-0.6495 -0.166,-0.9815 0.21975,-0.7715 z m 0,0"
id="path1070"
inkscape:connector-curvature="0" />
<path
style="fill:#deeeff;fill-opacity:1;fill-rule:evenodd;stroke:#7d7d7d;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 598.42809,631.86135 0.21475,0.84475 0.039,0.75675 -0.52733,0.32725 -0.44922,-0.34675 -0.0244,-0.664 0.1855,-0.46375 0,-0.4345 z m 0,0"
id="path1072"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#7d7d7d;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"
d="m 617.19761,644.49317 c 0,20.00978 -16.2207,36.23535 -36.23045,36.23535 -20.01465,0 -36.23537,-16.22557 -36.23537,-36.23535 0,-20.00974 16.22072,-36.23534 36.23537,-36.23534 20.00975,0 36.23045,16.2256 36.23045,36.23534"
id="path1074"
inkscape:connector-curvature="0" />
</g>
</g>
</defs>
</svg>
<script type="text/javascript">
// normal tree building stuff taken from a tutorial somewhere
var treeData = {name: "Switch 1", type: "switch", children : [
{name: "Server 1", type: 'webserver' },
{name: "Server 2", type: 'webserver' },
{name: "Server 3", type: 'webserver' } ]
};
var vis = d3.select("svg").append("svg:g").attr("transform", "translate(50, 0)")
var tree = d3.layout.tree().size([300,300]);
var nodes = tree.nodes(treeData);
var links = tree.links(nodes);
var diagonalHorizontal = d3.svg.diagonal().projection( function(d) { return [d.y, d.x]; } );
var link = vis.selectAll(".nodelink")
.data(links)
.enter().append("path")
.attr("class", "nodelink")
.attr("d", diagonalHorizontal)
.attr('pointer-events', 'none');
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + (d.y-13) + "," + (d.x-10) + ")"; })
// create a reference to the <g> id sections defined in the existing svg markup exported from Inkscape
node.append("use")
.attr("xlink:href", function(d) { return "#" + d.type; } )
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment