D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
D3.js: force layout (con 300 ejes)
<!DOCTYPE html> <html> <head> <meta name="description" content="300 ejes" /> <script src="https://d3js.org/d3.v3.min.js"></script> <meta charset="utf-8"> <title>D3: Force layout (300 ejes)</title> </head> <body> <script type="text/javascript"> var w = 600; var h = 500; var r = 10; var nodes = {}; var links = [ {'source':69,'target':282}, {'source':53,'target':214}, {'source':86,'target':68}, {'source':198,'target':165}, {'source':284,'target':146}, {'source':41,'target':185}, {'source':80,'target':284}, {'source':261,'target':44}, {'source':152,'target':69}, {'source':68,'target':203}, {'source':219,'target':158}, {'source':59,'target':134}, {'source':208,'target':278}, {'source':102,'target':143}, {'source':22,'target':81}, {'source':277,'target':145}, {'source':250,'target':196}, {'source':145,'target':81}, {'source':183,'target':97}, {'source':232,'target':147}, {'source':117,'target':64}, {'source':119,'target':89}, {'source':199,'target':176}, {'source':184,'target':8}, {'source':219,'target':233}, {'source':115,'target':273}, {'source':66,'target':171}, {'source':76,'target':135}, {'source':285,'target':278}, {'source':248,'target':135}, {'source':167,'target':59}, {'source':54,'target':260}, {'source':300,'target':49}, {'source':252,'target':127}, {'source':251,'target':125}, {'source':284,'target':194}, {'source':293,'target':11}, {'source':30,'target':109}, {'source':244,'target':238}, {'source':144,'target':79}, {'source':98,'target':12}, {'source':163,'target':96}, {'source':203,'target':213}, {'source':6,'target':289}, {'source':265,'target':238}, {'source':224,'target':294}, {'source':177,'target':255}, {'source':56,'target':95}, {'source':199,'target':168}, {'source':187,'target':279}, {'source':172,'target':272}, {'source':286,'target':182}, {'source':107,'target':59}, {'source':6,'target':35}, {'source':169,'target':59}, {'source':264,'target':225}, {'source':290,'target':104}, {'source':188,'target':271}, {'source':25,'target':248}, {'source':224,'target':135}, {'source':55,'target':6}, {'source':283,'target':292}, {'source':9,'target':98}, {'source':290,'target':104}, {'source':70,'target':273}, {'source':206,'target':236}, {'source':169,'target':226}, {'source':4,'target':114}, {'source':170,'target':138}, {'source':300,'target':62}, {'source':109,'target':116}, {'source':190,'target':99}, {'source':152,'target':107}, {'source':172,'target':97}, {'source':227,'target':167}, {'source':40,'target':73}, {'source':78,'target':241}, {'source':219,'target':244}, {'source':29,'target':114}, {'source':88,'target':114}, {'source':280,'target':223}, {'source':178,'target':112}, {'source':66,'target':263}, {'source':52,'target':135}, {'source':142,'target':61}, {'source':204,'target':101}, {'source':201,'target':178}, {'source':124,'target':96}, {'source':160,'target':125}, {'source':34,'target':213}, {'source':269,'target':192}, {'source':20,'target':69}, {'source':169,'target':135}, {'source':124,'target':187}, {'source':177,'target':28}, {'source':96,'target':231}, {'source':88,'target':132}, {'source':20,'target':255}, {'source':196,'target':114}, {'source':186,'target':148}, {'source':290,'target':116}, {'source':298,'target':16}, {'source':135,'target':67}, {'source':154,'target':3}, {'source':201,'target':254}, {'source':127,'target':87}, {'source':188,'target':4}, {'source':115,'target':183}, {'source':99,'target':46}, {'source':278,'target':186}, {'source':177,'target':250}, {'source':205,'target':132}, {'source':19,'target':101}, {'source':246,'target':213}, {'source':286,'target':93}, {'source':19,'target':276}, {'source':208,'target':16}, {'source':292,'target':43}, {'source':82,'target':145}, {'source':46,'target':283}, {'source':98,'target':173}, {'source':70,'target':286}, {'source':176,'target':185}, {'source':168,'target':274}, {'source':230,'target':145}, {'source':159,'target':107}, {'source':95,'target':64}, {'source':238,'target':113}, {'source':164,'target':184}, {'source':26,'target':150}, {'source':276,'target':44}, {'source':126,'target':184}, {'source':60,'target':117}, {'source':226,'target':142}, {'source':261,'target':272}, {'source':124,'target':59}, {'source':144,'target':194}, {'source':44,'target':19}, {'source':78,'target':211}, {'source':293,'target':8}, {'source':56,'target':152}, {'source':114,'target':150}, {'source':215,'target':52}, {'source':263,'target':79}, {'source':235,'target':288}, {'source':229,'target':211}, {'source':32,'target':54}, {'source':94,'target':91}, {'source':170,'target':20}, {'source':233,'target':131}, {'source':291,'target':56}, {'source':190,'target':135}, {'source':250,'target':234}, {'source':153,'target':27}, {'source':144,'target':146}, {'source':34,'target':200}, {'source':297,'target':148}, {'source':49,'target':211}, {'source':200,'target':11}, {'source':290,'target':134}, {'source':299,'target':218}, {'source':44,'target':31}, {'source':271,'target':138}, {'source':121,'target':141}, {'source':157,'target':53}, {'source':272,'target':148}, {'source':109,'target':161}, {'source':282,'target':58}, {'source':94,'target':135}, {'source':85,'target':238}, {'source':280,'target':119}, {'source':137,'target':276}, {'source':267,'target':186}, {'source':187,'target':166}, {'source':197,'target':176}, {'source':300,'target':195}, {'source':94,'target':43}, {'source':225,'target':65}, {'source':180,'target':46}, {'source':205,'target':37}, {'source':99,'target':177}, {'source':184,'target':207}, {'source':38,'target':166}, {'source':265,'target':132}, {'source':300,'target':50}, {'source':70,'target':280}, {'source':169,'target':206}, {'source':256,'target':135}, {'source':92,'target':142}, {'source':300,'target':288}, {'source':18,'target':299}, {'source':183,'target':111}, {'source':42,'target':108}, {'source':175,'target':222}, {'source':153,'target':80}, {'source':258,'target':251}, {'source':256,'target':142}, {'source':158,'target':294}, {'source':7,'target':123}, {'source':125,'target':7}, {'source':173,'target':194}, {'source':287,'target':41}, {'source':100,'target':242}, {'source':175,'target':191}, {'source':83,'target':175}, {'source':178,'target':100}, {'source':174,'target':61}, {'source':210,'target':215}, {'source':168,'target':85}, {'source':136,'target':20}, {'source':164,'target':94}, {'source':271,'target':120}, {'source':236,'target':129}, {'source':113,'target':242}, {'source':252,'target':238}, {'source':249,'target':124}, {'source':131,'target':235}, {'source':164,'target':230}, {'source':176,'target':39}, {'source':121,'target':259}, {'source':213,'target':299}, {'source':59,'target':86}, {'source':59,'target':268}, {'source':1,'target':226}, {'source':53,'target':137}, {'source':246,'target':216}, {'source':230,'target':216}, {'source':36,'target':166}, {'source':45,'target':148}, {'source':107,'target':296}, {'source':86,'target':56}, {'source':119,'target':216}, {'source':291,'target':283}, {'source':146,'target':167}, {'source':21,'target':267}, {'source':125,'target':234}, {'source':265,'target':183}, {'source':20,'target':24}, {'source':151,'target':21}, {'source':249,'target':203}, {'source':157,'target':194}, {'source':119,'target':87}, {'source':110,'target':154}, {'source':252,'target':154}, {'source':2,'target':59}, {'source':149,'target':87}, {'source':115,'target':268}, {'source':3,'target':105}, {'source':250,'target':149}, {'source':271,'target':271}, {'source':115,'target':96}, {'source':205,'target':80}, {'source':278,'target':224}, {'source':103,'target':129}, {'source':244,'target':51}, {'source':32,'target':101}, {'source':245,'target':150}, {'source':187,'target':54}, {'source':3,'target':139}, {'source':208,'target':5}, {'source':197,'target':57}, {'source':92,'target':11}, {'source':24,'target':94}, {'source':116,'target':273}, {'source':242,'target':86}, {'source':244,'target':57}, {'source':182,'target':148}, {'source':136,'target':160}, {'source':72,'target':238}, {'source':288,'target':16}, {'source':288,'target':19}, {'source':116,'target':233}, {'source':169,'target':3}, {'source':287,'target':172}, {'source':141,'target':194}, {'source':176,'target':38}, {'source':250,'target':267}, {'source':49,'target':274}, {'source':61,'target':164}, {'source':247,'target':3}, {'source':250,'target':190}, {'source':59,'target':131}, {'source':37,'target':195}, {'source':290,'target':108}, {'source':132,'target':277}, {'source':123,'target':120}, {'source':296,'target':239}, {'source':52,'target':164}, {'source':241,'target':38}, {'source':35,'target':82}, {'source':232,'target':211}, {'source':119,'target':181}, {'source':178,'target':167}, {'source':154,'target':238}, {'source':31,'target':100}, {'source':240,'target':280}, {'source':290,'target':299}, {'source':110,'target':26}, {'source':193,'target':99}, {'source':76,'target':256}, ]; links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([w, h]) .linkDistance(20) .linkStrength(1) .friction(0.5) .charge(-50) .gravity(0.1) // 0.1 (default) .theta(0.8) // 0.8 (default) .start(); var colors = d3.scale.category10(); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) //.attr("pointer-events", "all") //.attr("pointer-events", "visible") .call(d3.behavior.zoom().on("zoom", redraw)) .append('g'); var edges = svg.selectAll("line") .data(links) .enter() .append("line") .style("stroke", "rgba(0, 0, 0, 0.1)" ) .style("stroke-width", 1 ); var nodes = svg.selectAll("circle") .data(d3.values(nodes)) .enter() .append("circle") .attr("r", function(d) {return 2*d.weight;}) .style("fill", function(d) { return colors(d.weight); }) .attr("title", function(d) { return d.weight; }) .call(force.drag); force.on("tick", function() { edges.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; }); // comportamiento default segun los parametros del Force Layout nodes.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); // cx y cy limitado al bounding box // nodes.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); }) // .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); }); // modificando la posición, según drag & zoom in/out // nodes.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); }); function redraw() { // console.log("translate --> " + d3.event.translate, "scale --> " + d3.event.scale); svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js