D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
damayor
Full window
Github gist
collision mobile
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 500, height = 500; var textos = ["El Corral", "Carulla","Exito","Gratto","Zara","Cascabel","Alkosto","Falabella","Sodexo"]; var counts = //d3.range(10).map(function() { return {radius: Math.random() * 50 + 30}}); [,23,84,85,16,47,34,124,103,41,90]; var nodes = //d3.range(10).map(function() { return {radius: Math.random() * 50 + 30}; }), d3.range(10).map( function(i) { return {radius: counts[i]}; }), // labels = ( function(i) { return {radius: textos[i]}; }),//, root = nodes[0], color = d3.scale.category10(); root.radius = 0; root.fixed = true; var force = d3.layout.force() .gravity(0.05) .charge(function(d, i) { return i ? 0 : -2000; }) .nodes(nodes) .size([width, height]); force.start(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); //le toca hacer un grupo enter circle y text, no una jerarquia var bub = svg.selectAll("circle") .data(nodes.slice(1)) .enter().append("circle") .attr("r", function(d) { return d.radius; }) .style("fill", function(d, i) { return color(i ); }); svg.selectAll("text") .data(nodes.slice(1)) //nodes .enter().append("text") //.attr("x", function(d) { return 5*d.radius; }) //.attr("y", function(d) { return 9*d.radius;}) .attr("font-size", function(d) { return 0.2*d.radius+"px";}) //"25px" ) .attr("dx", function(d){return "-"+0.3*d.radius+"px"}) .attr("dy", function(d){return 0.05*d.radius+"px"}) .attr("fill", "white") //.text("hola"); .text(function(d,i) { return textos[i];}); //"hola!!"); force.on("tick", function(e) { var q = d3.geom.quadtree(nodes), i = 0, n = nodes.length; while (++i < n) q.visit(collide(nodes[i])); svg.selectAll("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); svg.selectAll("text") .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y;}); ; }); svg.on("mouseover", function() //svg.on("touchmove", function() { var p1 = d3.mouse(this); root.px = p1[0]; root.py = p1[1]; force.resume(); }); //}) function collide(node) { var r = node.radius + 16, nx1 = node.x - r, nx2 = node.x + r, ny1 = node.y - r, ny2 = node.y + r; return function(quad, x1, y1, x2, y2) { if (quad.point && (quad.point !== node)) { var x = node.x - quad.point.x, y = node.y - quad.point.y, l = Math.sqrt(x * x + y * y), r = node.radius + quad.point.radius; if (l < r) { l = (l - r) / l * .5; node.x -= x *= l; node.y -= y *= l; quad.point.x += x; quad.point.y += y; } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }; } </script>
https://d3js.org/d3.v3.min.js