Skip to content

Instantly share code, notes, and snippets.

@AndreasMadsen

AndreasMadsen/README.md

Created July 17, 2014 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndreasMadsen/056684e54d21b13d726f to your computer and use it in GitHub Desktop.
Save AndreasMadsen/056684e54d21b13d726f to your computer and use it in GitHub Desktop.
Download ZIP
d3 force layout overflow
Raw
README.md

In the figure it is seen that some nodes appear outside the container, this causes them to be hidden. Furthermore it is not possible to drag the figure such that all nodes can be seen.

From the documentation:

The function is evaluated whenever the layout starts. Typically, the distance is specified in pixels; however, the units are arbitrary relative to the layout's size.

While it is not completely clear. I believe this means that the distance is scaled such that all information (nodes) is visible.

Raw
data.json
{
"nodes":[
{"group": 5},
{"group": 3},
{"group": 3},
{"group": 5},
{"group": 5},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 2},
{"group": 2},
{"group": 8},
{"group": 8},
{"group": 8},
{"group": 8},
{"group": 8},
{"group": 8},
{"group": 8},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 3},
{"group": 3},
{"group": 3},
{"group": 3},
{"group": 3},
{"group": 3},
{"group": 3},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 4},
{"group": 4},
{"group": 4},
{"group": 4},
{"group": 4},
{"group": 4},
{"group": 4},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 7},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 0},
{"group": 5},
{"group": 5},
{"group": 6},
{"group": 6},
{"group": 6},
{"group": 6},
{"group": 6},
{"group": 6},
{"group": 6},
{"group": 9},
{"group": 9},
{"group": 9},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 2},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 5},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1},
{"group": 1}
],
"links":[
{"source":0,"target":8,"value":0.0077870083},
{"source":1,"target":101,"value":0.0859576538},
{"source":2,"target":57,"value":0.0903139785},
{"source":2,"target":44,"value":0.0905615464},
{"source":2,"target":35,"value":0.0913459435},
{"source":2,"target":4,"value":0.018928336},
{"source":3,"target":47,"value":0.0916270018},
{"source":3,"target":102,"value":0.0705320984},
{"source":3,"target":62,"value":0.0973476917},
{"source":3,"target":53,"value":0.097378917},
{"source":3,"target":74,"value":0.0925164893},
{"source":3,"target":58,"value":0.0980956778},
{"source":3,"target":51,"value":0.0864562318},
{"source":4,"target":57,"value":0.0904332697},
{"source":4,"target":44,"value":0.0904956385},
{"source":4,"target":35,"value":0.0912675187},
{"source":5,"target":47,"value":0.0912836418},
{"source":5,"target":58,"value":0.0847609043},
{"source":5,"target":51,"value":0.0880085006},
{"source":6,"target":115,"value":0.0633151755},
{"source":6,"target":36,"value":0.0981279016},
{"source":6,"target":13,"value":0.0929459706},
{"source":6,"target":112,"value":0.0929379091},
{"source":6,"target":43,"value":0.0766562223},
{"source":6,"target":27,"value":0.0802093148},
{"source":7,"target":29,"value":0.0976077467},
{"source":7,"target":12,"value":0.0001206669},
{"source":9,"target":84,"value":0.0952984244},
{"source":9,"target":11,"value":0.0903650597},
{"source":10,"target":15,"value":0.0198852532},
{"source":11,"target":58,"value":0.0876896679},
{"source":11,"target":51,"value":0.0928703249},
{"source":11,"target":5,"value":0.0670213997},
{"source":11,"target":40,"value":0.0881700888},
{"source":11,"target":38,"value":0.0883232355},
{"source":11,"target":25,"value":0.0792486593},
{"source":11,"target":100,"value":0.0912558138},
{"source":11,"target":84,"value":0.0687944666},
{"source":12,"target":29,"value":0.0975895599},
{"source":13,"target":28,"value":0.099626869},
{"source":13,"target":115,"value":0.0748794004},
{"source":14,"target":70,"value":0.0454085283},
{"source":14,"target":33,"value":0.0854846686},
{"source":14,"target":31,"value":0.0854713321},
{"source":14,"target":30,"value":0.08861655},
{"source":15,"target":61,"value":0.0972958803},
{"source":16,"target":92,"value":0.098107785},
{"source":16,"target":68,"value":0.0957733095},
{"source":16,"target":90,"value":0.0817238092},
{"source":16,"target":39,"value":0.07684201},
{"source":16,"target":23,"value":0.0765707046},
{"source":16,"target":24,"value":0.0014151069},
{"source":17,"target":5,"value":0.0993029773},
{"source":17,"target":100,"value":0.0887662247},
{"source":17,"target":84,"value":0.0942159891},
{"source":17,"target":88,"value":0.0992255658},
{"source":17,"target":80,"value":0.096372813},
{"source":18,"target":17,"value":0.0735978484},
{"source":18,"target":114,"value":0.0804740116},
{"source":18,"target":65,"value":0.0997547433},
{"source":18,"target":48,"value":0.097789757},
{"source":18,"target":20,"value":0.0925066695},
{"source":19,"target":30,"value":0.0825163871},
{"source":19,"target":63,"value":0.0863713324},
{"source":19,"target":74,"value":0.0975636393},
{"source":19,"target":57,"value":0.0675306544},
{"source":19,"target":111,"value":0.0825547948},
{"source":19,"target":87,"value":0.09154661},
{"source":20,"target":17,"value":0.0896484926},
{"source":20,"target":110,"value":0.0939299688},
{"source":20,"target":105,"value":0.0939782709},
{"source":21,"target":110,"value":0.097162053},
{"source":21,"target":105,"value":0.0971344709},
{"source":21,"target":15,"value":0.0903756097},
{"source":21,"target":10,"value":0.0974253044},
{"source":23,"target":92,"value":0.0899253264},
{"source":23,"target":17,"value":0.0952270329},
{"source":23,"target":114,"value":0.0968885496},
{"source":23,"target":9,"value":0.0943793282},
{"source":23,"target":90,"value":0.0578977428},
{"source":23,"target":95,"value":0.0905445218},
{"source":23,"target":65,"value":0.0972099528},
{"source":23,"target":48,"value":0.0974093154},
{"source":23,"target":39,"value":0.0186375901},
{"source":24,"target":92,"value":0.098208636},
{"source":24,"target":68,"value":0.0962575823},
{"source":24,"target":90,"value":0.0817383826},
{"source":24,"target":39,"value":0.0770595893},
{"source":24,"target":23,"value":0.0766994357},
{"source":25,"target":5,"value":0.0852679461},
{"source":27,"target":28,"value":0.0873090327},
{"source":27,"target":115,"value":0.0745294094},
{"source":27,"target":13,"value":0.0810193494},
{"source":27,"target":112,"value":0.0811116174},
{"source":27,"target":43,"value":0.0670417696},
{"source":28,"target":29,"value":0.0923218951},
{"source":28,"target":113,"value":0.0683586746},
{"source":30,"target":70,"value":0.0715944394},
{"source":31,"target":33,"value":0.002013803},
{"source":32,"target":55,"value":0.0878860503},
{"source":32,"target":45,"value":0.0903460458},
{"source":32,"target":41,"value":0.0002111918},
{"source":34,"target":59,"value":0.0817508101},
{"source":35,"target":44,"value":0.0031937137},
{"source":36,"target":28,"value":0.0839495659},
{"source":36,"target":115,"value":0.0950821936},
{"source":37,"target":38,"value":0.097677879},
{"source":38,"target":22,"value":0.0973097682},
{"source":38,"target":91,"value":0.0784600601},
{"source":38,"target":81,"value":0.078434974},
{"source":38,"target":40,"value":0.0003368703},
{"source":39,"target":92,"value":0.0924929976},
{"source":39,"target":9,"value":0.0870835409},
{"source":39,"target":90,"value":0.0587873533},
{"source":40,"target":22,"value":0.0973997265},
{"source":40,"target":91,"value":0.0786179304},
{"source":40,"target":81,"value":0.078593038},
{"source":41,"target":55,"value":0.0879390836},
{"source":41,"target":45,"value":0.0904012024},
{"source":43,"target":115,"value":0.0785770267},
{"source":43,"target":13,"value":0.0753832012},
{"source":43,"target":112,"value":0.0752390176},
{"source":45,"target":42,"value":0.0978291929},
{"source":45,"target":55,"value":0.0118975043},
{"source":46,"target":90,"value":0.0989653766},
{"source":46,"target":39,"value":0.0977712348},
{"source":46,"target":64,"value":0.0997692645},
{"source":46,"target":72,"value":0.0049451538},
{"source":47,"target":27,"value":0.092822589},
{"source":48,"target":92,"value":0.0958504975},
{"source":48,"target":17,"value":0.0960875526},
{"source":48,"target":114,"value":0.076000452},
{"source":48,"target":90,"value":0.0859879926},
{"source":48,"target":65,"value":0.0049935202},
{"source":49,"target":51,"value":0.0885786638},
{"source":49,"target":3,"value":0.096927911},
{"source":49,"target":116,"value":0.0968429595},
{"source":49,"target":111,"value":0.0973826125},
{"source":49,"target":87,"value":0.0892101973},
{"source":49,"target":100,"value":0.0714790225},
{"source":49,"target":52,"value":0.0007089597},
{"source":50,"target":95,"value":0.0810768977},
{"source":50,"target":23,"value":0.0996007249},
{"source":50,"target":54,"value":0.0315505527},
{"source":51,"target":102,"value":0.0960335582},
{"source":51,"target":74,"value":0.0727331117},
{"source":51,"target":58,"value":0.0515442491},
{"source":52,"target":51,"value":0.0886183232},
{"source":52,"target":3,"value":0.0967180729},
{"source":52,"target":116,"value":0.0966356397},
{"source":52,"target":111,"value":0.0974990204},
{"source":52,"target":87,"value":0.0892776176},
{"source":52,"target":100,"value":0.0715828314},
{"source":53,"target":102,"value":0.0933408663},
{"source":53,"target":62,"value":0.0002096102},
{"source":54,"target":95,"value":0.0863136798},
{"source":55,"target":92,"value":0.0999312624},
{"source":55,"target":68,"value":0.0994492546},
{"source":55,"target":42,"value":0.0985752717},
{"source":56,"target":71,"value":0.0887144506},
{"source":56,"target":89,"value":0.088967301},
{"source":56,"target":66,"value":0.0846936777},
{"source":57,"target":30,"value":0.0700793862},
{"source":57,"target":14,"value":0.086650908},
{"source":57,"target":63,"value":0.0895516723},
{"source":57,"target":74,"value":0.0995378718},
{"source":58,"target":47,"value":0.0963534117},
{"source":58,"target":102,"value":0.0984954759},
{"source":58,"target":74,"value":0.0966635495},
{"source":59,"target":76,"value":0.0705270246},
{"source":59,"target":94,"value":0.0694416836},
{"source":62,"target":102,"value":0.0933206305},
{"source":63,"target":30,"value":0.0878446624},
{"source":64,"target":69,"value":0.0009475251},
{"source":65,"target":92,"value":0.0964902639},
{"source":65,"target":17,"value":0.0974874496},
{"source":65,"target":114,"value":0.0753425509},
{"source":65,"target":9,"value":0.0992007032},
{"source":65,"target":90,"value":0.0845676437},
{"source":66,"target":19,"value":0.0959297121},
{"source":66,"target":101,"value":0.0913000554},
{"source":66,"target":89,"value":0.0942277536},
{"source":67,"target":112,"value":0.0923305303},
{"source":68,"target":92,"value":0.0776012912},
{"source":70,"target":94,"value":0.0766218826},
{"source":71,"target":14,"value":0.0994562209},
{"source":72,"target":92,"value":0.099834159},
{"source":72,"target":90,"value":0.0966091082},
{"source":72,"target":39,"value":0.0959356204},
{"source":72,"target":23,"value":0.0986316949},
{"source":73,"target":88,"value":0.0990735143},
{"source":73,"target":80,"value":0.0973715708},
{"source":73,"target":75,"value":0.0001860012},
{"source":74,"target":102,"value":0.0811951011},
{"source":75,"target":88,"value":0.0990901589},
{"source":75,"target":80,"value":0.0973849893},
{"source":76,"target":26,"value":0.0994647071},
{"source":76,"target":86,"value":0.0949979499},
{"source":77,"target":78,"value":0.063226819},
{"source":78,"target":13,"value":0.0966657922},
{"source":78,"target":112,"value":0.0968440697},
{"source":79,"target":40,"value":0.0655414015},
{"source":79,"target":38,"value":0.0654813796},
{"source":79,"target":11,"value":0.0960951969},
{"source":79,"target":82,"value":0.0101454873},
{"source":80,"target":3,"value":0.086459212},
{"source":80,"target":116,"value":0.0864008367},
{"source":80,"target":88,"value":0.01278059},
{"source":81,"target":67,"value":0.0909789577},
{"source":81,"target":22,"value":0.0845021904},
{"source":81,"target":91,"value":0.0000858497},
{"source":82,"target":40,"value":0.0660543367},
{"source":82,"target":38,"value":0.0659970567},
{"source":82,"target":11,"value":0.096204482},
{"source":83,"target":24,"value":0.0981792808},
{"source":83,"target":16,"value":0.0981511548},
{"source":83,"target":85,"value":0.0019168539},
{"source":84,"target":102,"value":0.0997604579},
{"source":84,"target":58,"value":0.0657175034},
{"source":84,"target":51,"value":0.0804745033},
{"source":84,"target":5,"value":0.0495042577},
{"source":84,"target":25,"value":0.0935216546},
{"source":84,"target":100,"value":0.076114893},
{"source":85,"target":24,"value":0.0988192111},
{"source":85,"target":16,"value":0.0987904742},
{"source":87,"target":63,"value":0.0812963247},
{"source":87,"target":74,"value":0.08963494},
{"source":87,"target":0,"value":0.0974745154},
{"source":87,"target":51,"value":0.0997097641},
{"source":87,"target":3,"value":0.0908677354},
{"source":87,"target":116,"value":0.090621762},
{"source":87,"target":111,"value":0.0191809479},
{"source":88,"target":3,"value":0.0884670764},
{"source":88,"target":116,"value":0.0883988217},
{"source":89,"target":71,"value":0.0915500224},
{"source":90,"target":84,"value":0.0736543387},
{"source":90,"target":11,"value":0.0813826546},
{"source":90,"target":92,"value":0.0981309116},
{"source":90,"target":17,"value":0.0977695733},
{"source":90,"target":114,"value":0.0856983513},
{"source":90,"target":9,"value":0.070910573},
{"source":91,"target":67,"value":0.090952456},
{"source":91,"target":22,"value":0.084485516},
{"source":92,"target":58,"value":0.0996846706},
{"source":92,"target":5,"value":0.0937266499},
{"source":93,"target":114,"value":0.0947214216},
{"source":93,"target":75,"value":0.0910834298},
{"source":93,"target":73,"value":0.0910303369},
{"source":93,"target":104,"value":0.062563695},
{"source":93,"target":98,"value":0.0624970458},
{"source":93,"target":99,"value":0.0164450146},
{"source":94,"target":76,"value":0.0904938355},
{"source":95,"target":52,"value":0.0902245194},
{"source":95,"target":49,"value":0.0903255045},
{"source":95,"target":17,"value":0.0903965235},
{"source":95,"target":114,"value":0.0977565721},
{"source":95,"target":90,"value":0.0996548757},
{"source":96,"target":9,"value":0.0945212394},
{"source":96,"target":109,"value":0.0975794122},
{"source":97,"target":115,"value":0.0713869557},
{"source":97,"target":36,"value":0.0945855826},
{"source":97,"target":13,"value":0.09093678},
{"source":97,"target":112,"value":0.0910292417},
{"source":97,"target":43,"value":0.0685933977},
{"source":97,"target":27,"value":0.0680016726},
{"source":97,"target":6,"value":0.0589013025},
{"source":97,"target":108,"value":0.0771886855},
{"source":98,"target":114,"value":0.0897047818},
{"source":98,"target":75,"value":0.090680927},
{"source":98,"target":73,"value":0.090643011},
{"source":98,"target":104,"value":0.0003019591},
{"source":99,"target":114,"value":0.0907973722},
{"source":99,"target":75,"value":0.0923078507},
{"source":99,"target":73,"value":0.0922575966},
{"source":99,"target":104,"value":0.0628723055},
{"source":99,"target":98,"value":0.0628140271},
{"source":100,"target":102,"value":0.0826299265},
{"source":100,"target":74,"value":0.0705306679},
{"source":100,"target":58,"value":0.0706164762},
{"source":100,"target":51,"value":0.051768478},
{"source":100,"target":3,"value":0.0831101388},
{"source":100,"target":116,"value":0.0829300657},
{"source":100,"target":111,"value":0.096372515},
{"source":100,"target":87,"value":0.0923158228},
{"source":100,"target":5,"value":0.0746493638},
{"source":101,"target":111,"value":0.087900579},
{"source":101,"target":87,"value":0.0938009173},
{"source":101,"target":19,"value":0.0756726936},
{"source":101,"target":4,"value":0.0835578442},
{"source":101,"target":2,"value":0.0833950043},
{"source":102,"target":107,"value":0.0969326943},
{"source":102,"target":47,"value":0.0601232871},
{"source":103,"target":104,"value":0.0991836488},
{"source":103,"target":98,"value":0.0991639718},
{"source":103,"target":60,"value":0.0225255992},
{"source":104,"target":114,"value":0.0897900984},
{"source":104,"target":75,"value":0.0908588395},
{"source":104,"target":73,"value":0.0908211544},
{"source":105,"target":110,"value":0.0002353561},
{"source":106,"target":82,"value":0.0722723231},
{"source":106,"target":79,"value":0.0717582032},
{"source":106,"target":9,"value":0.0976530463},
{"source":106,"target":109,"value":0.0266744141},
{"source":108,"target":115,"value":0.0701055825},
{"source":108,"target":13,"value":0.0934885889},
{"source":108,"target":112,"value":0.0933396742},
{"source":108,"target":43,"value":0.0738129318},
{"source":108,"target":27,"value":0.0901615769},
{"source":108,"target":6,"value":0.0471669994},
{"source":109,"target":82,"value":0.0764519945},
{"source":109,"target":79,"value":0.0759852827},
{"source":109,"target":9,"value":0.0966696963},
{"source":111,"target":63,"value":0.0817794204},
{"source":111,"target":74,"value":0.0884387568},
{"source":111,"target":57,"value":0.0980545059},
{"source":111,"target":3,"value":0.0973475426},
{"source":111,"target":116,"value":0.0970679671},
{"source":112,"target":28,"value":0.0998311564},
{"source":112,"target":115,"value":0.0749542788},
{"source":112,"target":13,"value":0.0004521505},
{"source":113,"target":29,"value":0.0669042394},
{"source":114,"target":100,"value":0.0886303484},
{"source":114,"target":84,"value":0.0715331212},
{"source":114,"target":11,"value":0.0897385925},
{"source":114,"target":17,"value":0.0584230907},
{"source":115,"target":29,"value":0.0976723656},
{"source":115,"target":28,"value":0.0854344741},
{"source":116,"target":47,"value":0.0915701091},
{"source":116,"target":102,"value":0.0703053102},
{"source":116,"target":62,"value":0.0972681046},
{"source":116,"target":53,"value":0.0972985029},
{"source":116,"target":74,"value":0.0921888575},
{"source":116,"target":58,"value":0.098038882},
{"source":116,"target":51,"value":0.0863320082},
{"source":116,"target":3,"value":0.0005822697}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category10();
var force = d3.layout.force()
.charge(-120)
.linkStrength(0.3)
.linkDistance(function (d) { return d.value; })
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
console.log(force.nodes())
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment