Skip to content

Instantly share code, notes, and snippets.

@AndreasMadsen AndreasMadsen/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
d3 force layout overflow

d3 force layout issue

{
"nodes":[
[5,29188],
[3,21513],
[3,25609],
[5,27150],
[5,25618],
[2,26649],
[2,33306],
[2,37407],
[7,29219],
[7,22059],
[7,13374],
[7,24642],
[7,37442],
[7,34372],
[7,30789],
[2,13385],
[2,14410],
[8,22606],
[8,16468],
[8,26709],
[8,17495],
[8,12380],
[8,29788],
[8,18529],
[5,14442],
[5,26218],
[5,42607],
[5,33910],
[3,36983],
[3,40054],
[3,30861],
[3,32910],
[3,12945],
[3,32921],
[3,34976],
[1,25761],
[1,35488],
[1,22187],
[1,26284],
[1,18611],
[1,26294],
[1,12982],
[5,21183],
[5,33984],
[5,25793],
[5,15043],
[5,10952],
[5,30408],
[4,19149],
[4,25294],
[4,17106],
[4,27346],
[4,25307],
[4,29917],
[4,17121],
[0,15073],
[0,24297],
[0,29421],
[0,27375],
[0,37616],
[0,16624],
[5,14072],
[5,29946],
[5,30465],
[5,12043],
[5,19218],
[5,24851],
[7,30488],
[7,23324],
[7,12061],
[7,34588],
[7,28450],
[0,11044],
[0,22315],
[0,29492],
[0,22326],
[0,41272],
[0,33595],
[0,33606],
[5,22861],
[5,24399],
[6,26449],
[6,22868],
[6,13653],
[6,25943],
[6,13664],
[6,41315],
[6,26980],
[9,24425],
[9,24941],
[9,21872],
[5,26482],
[5,23419],
[5,14209],
[2,37773],
[2,21390],
[2,12688],
[2,32660],
[2,20889],
[2,14235],
[2,26015],
[5,24994],
[5,30115],
[5,16295],
[5,20907],
[5,18356],
[1,18881],
[1,33730],
[1,33221],
[1,18886],
[1,18387],
[1,27099],
[1,34271],
[1,39910],
[1,22507],
[1,36850],
[1,27126]
],
"links":[
[29188,29219,0.0077870083],
[21513,24994,0.0859576538],
[25609,29421,0.0903139785],
[25609,25793,0.0905615464],
[25609,25761,0.0913459435],
[25609,25618,0.018928336],
[27150,30408,0.0916270018],
[27150,30115,0.0705320984],
[27150,29946,0.0973476917],
[27150,29917,0.097378917],
[27150,29492,0.0925164893],
[27150,27375,0.0980956778],
[27150,27346,0.0864562318],
[25618,29421,0.0904332697],
[25618,25793,0.0904956385],
[25618,25761,0.0912675187],
[26649,30408,0.0912836418],
[26649,27375,0.0847609043],
[26649,27346,0.0880085006],
[33306,36850,0.0633151755],
[33306,35488,0.0981279016],
[33306,34372,0.0929459706],
[33306,34271,0.0929379091],
[33306,33984,0.0766562223],
[33306,33910,0.0802093148],
[37407,40054,0.0976077467],
[37407,37442,0.0001206669],
[22059,25943,0.0952984244],
[22059,24642,0.0903650597],
[13374,13385,0.0198852532],
[24642,27375,0.0876896679],
[24642,27346,0.0928703249],
[24642,26649,0.0670213997],
[24642,26294,0.0881700888],
[24642,26284,0.0883232355],
[24642,26218,0.0792486593],
[24642,26015,0.0912558138],
[24642,25943,0.0687944666],
[37442,40054,0.0975895599],
[34372,36983,0.099626869],
[34372,36850,0.0748794004],
[30789,34588,0.0454085283],
[30789,32921,0.0854846686],
[30789,32910,0.0854713321],
[30789,30861,0.08861655],
[13385,14072,0.0972958803],
[14410,23419,0.098107785],
[14410,23324,0.0957733095],
[14410,21872,0.0817238092],
[14410,18611,0.07684201],
[14410,18529,0.0765707046],
[14410,14442,0.0014151069],
[22606,26649,0.0993029773],
[22606,26015,0.0887662247],
[22606,25943,0.0942159891],
[22606,24425,0.0992255658],
[22606,24399,0.096372813],
[16468,22606,0.0735978484],
[16468,22507,0.0804740116],
[16468,19218,0.0997547433],
[16468,19149,0.097789757],
[16468,17495,0.0925066695],
[26709,30861,0.0825163871],
[26709,30465,0.0863713324],
[26709,29492,0.0975636393],
[26709,29421,0.0675306544],
[26709,27099,0.0825547948],
[26709,26980,0.09154661],
[17495,22606,0.0896484926],
[17495,18387,0.0939299688],
[17495,18356,0.0939782709],
[12380,18387,0.097162053],
[12380,18356,0.0971344709],
[12380,13385,0.0903756097],
[12380,13374,0.0974253044],
[18529,23419,0.0899253264],
[18529,22606,0.0952270329],
[18529,22507,0.0968885496],
[18529,22059,0.0943793282],
[18529,21872,0.0578977428],
[18529,21390,0.0905445218],
[18529,19218,0.0972099528],
[18529,19149,0.0974093154],
[18529,18611,0.0186375901],
[14442,23419,0.098208636],
[14442,23324,0.0962575823],
[14442,21872,0.0817383826],
[14442,18611,0.0770595893],
[14442,18529,0.0766994357],
[26218,26649,0.0852679461],
[33910,36983,0.0873090327],
[33910,36850,0.0745294094],
[33910,34372,0.0810193494],
[33910,34271,0.0811116174],
[33910,33984,0.0670417696],
[36983,40054,0.0923218951],
[36983,39910,0.0683586746],
[30861,34588,0.0715944394],
[32910,32921,0.002013803],
[12945,15073,0.0878860503],
[12945,15043,0.0903460458],
[12945,12982,0.0002111918],
[34976,37616,0.0817508101],
[25761,25793,0.0031937137],
[35488,36983,0.0839495659],
[35488,36850,0.0950821936],
[22187,26284,0.097677879],
[26284,29788,0.0973097682],
[26284,26482,0.0784600601],
[26284,26449,0.078434974],
[26284,26294,0.0003368703],
[18611,23419,0.0924929976],
[18611,22059,0.0870835409],
[18611,21872,0.0587873533],
[26294,29788,0.0973997265],
[26294,26482,0.0786179304],
[26294,26449,0.078593038],
[12982,15073,0.0879390836],
[12982,15043,0.0904012024],
[33984,36850,0.0785770267],
[33984,34372,0.0753832012],
[33984,34271,0.0752390176],
[15043,21183,0.0978291929],
[15043,15073,0.0118975043],
[10952,21872,0.0989653766],
[10952,18611,0.0977712348],
[10952,12043,0.0997692645],
[10952,11044,0.0049451538],
[30408,33910,0.092822589],
[19149,23419,0.0958504975],
[19149,22606,0.0960875526],
[19149,22507,0.076000452],
[19149,21872,0.0859879926],
[19149,19218,0.0049935202],
[25294,27346,0.0885786638],
[25294,27150,0.096927911],
[25294,27126,0.0968429595],
[25294,27099,0.0973826125],
[25294,26980,0.0892101973],
[25294,26015,0.0714790225],
[25294,25307,0.0007089597],
[17106,21390,0.0810768977],
[17106,18529,0.0996007249],
[17106,17121,0.0315505527],
[27346,30115,0.0960335582],
[27346,29492,0.0727331117],
[27346,27375,0.0515442491],
[25307,27346,0.0886183232],
[25307,27150,0.0967180729],
[25307,27126,0.0966356397],
[25307,27099,0.0974990204],
[25307,26980,0.0892776176],
[25307,26015,0.0715828314],
[29917,30115,0.0933408663],
[29917,29946,0.0002096102],
[17121,21390,0.0863136798],
[15073,23419,0.0999312624],
[15073,23324,0.0994492546],
[15073,21183,0.0985752717],
[24297,28450,0.0887144506],
[24297,24941,0.088967301],
[24297,24851,0.0846936777],
[29421,30861,0.0700793862],
[29421,30789,0.086650908],
[29421,30465,0.0895516723],
[29421,29492,0.0995378718],
[27375,30408,0.0963534117],
[27375,30115,0.0984954759],
[27375,29492,0.0966635495],
[37616,41272,0.0705270246],
[37616,37773,0.0694416836],
[29946,30115,0.0933206305],
[30465,30861,0.0878446624],
[12043,12061,0.0009475251],
[19218,23419,0.0964902639],
[19218,22606,0.0974874496],
[19218,22507,0.0753425509],
[19218,22059,0.0992007032],
[19218,21872,0.0845676437],
[24851,26709,0.0959297121],
[24851,24994,0.0913000554],
[24851,24941,0.0942277536],
[30488,34271,0.0923305303],
[23324,23419,0.0776012912],
[34588,37773,0.0766218826],
[28450,30789,0.0994562209],
[11044,23419,0.099834159],
[11044,21872,0.0966091082],
[11044,18611,0.0959356204],
[11044,18529,0.0986316949],
[22315,24425,0.0990735143],
[22315,24399,0.0973715708],
[22315,22326,0.0001860012],
[29492,30115,0.0811951011],
[22326,24425,0.0990901589],
[22326,24399,0.0973849893],
[41272,42607,0.0994647071],
[41272,41315,0.0949979499],
[33595,33606,0.063226819],
[33606,34372,0.0966657922],
[33606,34271,0.0968440697],
[22861,26294,0.0655414015],
[22861,26284,0.0654813796],
[22861,24642,0.0960951969],
[22861,22868,0.0101454873],
[24399,27150,0.086459212],
[24399,27126,0.0864008367],
[24399,24425,0.01278059],
[26449,30488,0.0909789577],
[26449,29788,0.0845021904],
[26449,26482,0.0000858497],
[22868,26294,0.0660543367],
[22868,26284,0.0659970567],
[22868,24642,0.096204482],
[13653,14442,0.0981792808],
[13653,14410,0.0981511548],
[13653,13664,0.0019168539],
[25943,30115,0.0997604579],
[25943,27375,0.0657175034],
[25943,27346,0.0804745033],
[25943,26649,0.0495042577],
[25943,26218,0.0935216546],
[25943,26015,0.076114893],
[13664,14442,0.0988192111],
[13664,14410,0.0987904742],
[26980,30465,0.0812963247],
[26980,29492,0.08963494],
[26980,29188,0.0974745154],
[26980,27346,0.0997097641],
[26980,27150,0.0908677354],
[26980,27126,0.090621762],
[26980,27099,0.0191809479],
[24425,27150,0.0884670764],
[24425,27126,0.0883988217],
[24941,28450,0.0915500224],
[21872,25943,0.0736543387],
[21872,24642,0.0813826546],
[21872,23419,0.0981309116],
[21872,22606,0.0977695733],
[21872,22507,0.0856983513],
[21872,22059,0.070910573],
[26482,30488,0.090952456],
[26482,29788,0.084485516],
[23419,27375,0.0996846706],
[23419,26649,0.0937266499],
[14209,22507,0.0947214216],
[14209,22326,0.0910834298],
[14209,22315,0.0910303369],
[14209,20907,0.062563695],
[14209,20889,0.0624970458],
[14209,14235,0.0164450146],
[37773,41272,0.0904938355],
[21390,25307,0.0902245194],
[21390,25294,0.0903255045],
[21390,22606,0.0903965235],
[21390,22507,0.0977565721],
[21390,21872,0.0996548757],
[12688,22059,0.0945212394],
[12688,18886,0.0975794122],
[32660,36850,0.0713869557],
[32660,35488,0.0945855826],
[32660,34372,0.09093678],
[32660,34271,0.0910292417],
[32660,33984,0.0685933977],
[32660,33910,0.0680016726],
[32660,33306,0.0589013025],
[32660,33221,0.0771886855],
[20889,22507,0.0897047818],
[20889,22326,0.090680927],
[20889,22315,0.090643011],
[20889,20907,0.0003019591],
[14235,22507,0.0907973722],
[14235,22326,0.0923078507],
[14235,22315,0.0922575966],
[14235,20907,0.0628723055],
[14235,20889,0.0628140271],
[26015,30115,0.0826299265],
[26015,29492,0.0705306679],
[26015,27375,0.0706164762],
[26015,27346,0.051768478],
[26015,27150,0.0831101388],
[26015,27126,0.0829300657],
[26015,27099,0.096372515],
[26015,26980,0.0923158228],
[26015,26649,0.0746493638],
[24994,27099,0.087900579],
[24994,26980,0.0938009173],
[24994,26709,0.0756726936],
[24994,25618,0.0835578442],
[24994,25609,0.0833950043],
[30115,33730,0.0969326943],
[30115,30408,0.0601232871],
[16295,20907,0.0991836488],
[16295,20889,0.0991639718],
[16295,16624,0.0225255992],
[20907,22507,0.0897900984],
[20907,22326,0.0908588395],
[20907,22315,0.0908211544],
[18356,18387,0.0002353561],
[18881,22868,0.0722723231],
[18881,22861,0.0717582032],
[18881,22059,0.0976530463],
[18881,18886,0.0266744141],
[33221,36850,0.0701055825],
[33221,34372,0.0934885889],
[33221,34271,0.0933396742],
[33221,33984,0.0738129318],
[33221,33910,0.0901615769],
[33221,33306,0.0471669994],
[18886,22868,0.0764519945],
[18886,22861,0.0759852827],
[18886,22059,0.0966696963],
[27099,30465,0.0817794204],
[27099,29492,0.0884387568],
[27099,29421,0.0980545059],
[27099,27150,0.0973475426],
[27099,27126,0.0970679671],
[34271,36983,0.0998311564],
[34271,36850,0.0749542788],
[34271,34372,0.0004521505],
[39910,40054,0.0669042394],
[22507,26015,0.0886303484],
[22507,25943,0.0715331212],
[22507,24642,0.0897385925],
[22507,22606,0.0584230907],
[36850,40054,0.0976723656],
[36850,36983,0.0854344741],
[27126,30408,0.0915701091],
[27126,30115,0.0703053102],
[27126,29946,0.0972681046],
[27126,29917,0.0972985029],
[27126,29492,0.0921888575],
[27126,27375,0.098038882],
[27126,27346,0.0863320082],
[27126,27150,0.0005822697]
]
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
width: 960px;
height: 500px;
position: relative;
}
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #fff;
stroke-opacity: 0.2;
stroke-width: 1px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category10();
var scale = d3.scale.sqrt()
.range([1, 30]);
var force = d3.layout.force()
.charge(-120)
.linkStrength(0.3)
.linkDistance(function (d) { return scale(d.distance); })
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, data) {
var nodes = [],
links = [];
// Create nodes and links
var id2index = {}, i;
for (i=0; i < data.nodes.length; i++) {
var node = data.nodes[i];
id2index[node[1]] = i;
nodes.push({
"group": node[0],
"id": node[1]
});
}
var min = Infinity, max = 0;
for (i=0; i < data.links.length; i++) {
var link = data.links[i];
links.push({
"source": nodes[ id2index[link[0]] ],
"target": nodes[ id2index[link[1]] ],
"distance": link[2]
});
if (link[2] < min) min = link[2];
if (link[2] > max) max = link[2];
}
scale.domain([min, max]);
// Create force layout
force
.nodes(nodes)
.links(links)
.start();
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
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
You can’t perform that action at this time.