D3-collosion 2014-09-15 JsPy&Others <br><!DOCTYPE html><br><meta charset="utf-8"><br><body><br><script src="http://d3js.org/d3.v3.min.js"></script><br><script><br><br>var width = 960,<br> height = 500;<br><br>var nodes = d3.range(200).map(function() { return {radius: Math.random() <em> 12 + 4}; }),<br> root = nodes[0],<br> color = d3.scale.category10();<br><br>root.radius = 0;<br>root.fixed = true;<br><br>var force = d3.layout.force()<br> .gravity(0.05)<br> .charge(function(d, i) { return i ? 0 : -2000; })<br> .nodes(nodes)<br> .size([width, height]);<br><br>force.start();<br><br>var svg = d3.select(“body”).append(“svg”)<br> .attr(“width”, width)<br> .attr(“height”, height);<br><br>svg.selectAll(“circle”)<br> .data(nodes.slice(1))<br> .enter().append(“circle”)<br> .attr(“r”, function(d) { return d.radius; })<br> .style(“fill”, function(d, i) { return color(i % 3); });<br><br>force.on(“tick”, function(e) {<br> var q = d3.geom.quadtree(nodes),<br> i = 0,<br> n = nodes.length;<br><br> while (++i < n) q.visit(collide(nodes[i]));<br><br> svg.selectAll(“circle”)<br> .attr(“cx”, function(d) { return d.x; })<br> .attr(“cy”, function(d) { return d.y; });<br>});<br><br>svg.on(“mousemove”, function() {<br> var p1 = d3.mouse(this);<br> root.px = p1[0];<br> root.py = p1[1];<br> force.resume();<br>});<br><br>function collide(node) {<br> var r = node.radius + 16,<br> nx1 = node.x - r,<br> nx2 = node.x + r,<br> ny1 = node.y - r,<br> ny2 = node.y + r;<br> return function(quad, x1, y1, x2, y2) {<br> if (quad.point && (quad.point !== node)) {<br> var x = node.x - quad.point.x,<br> y = node.y - quad.point.y,<br> l = Math.sqrt(x </em> x + y <em> y),<br> r = node.radius + quad.point.radius;<br> if (l < r) {<br> l = (l - r) / l </em> .5;<br> node.x -= x <em>= l;<br> node.y -= y </em>= l;<br> quad.point.x += x;<br> quad.point.y += y;<br> }<br> }<br> return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;<br> };<br>}<br><br></script><br></body>
