block by aaizemberg 9233847

D3.js: force layout (con 300 ejes)

Full Screen

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="300 ejes" />
    <script src="//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>