| license: Apache 2.0 |
This clustered force layout is implemented using two custom forces. The first, cluster, pushes nodes towards the largest node of the same color. A second collide force prevents circles from overlapping by detecting collisions.
This example uses custom gravity applied only to the largest node of each color; compare to standard gravity.
forked from mbostock's block: Clustered Force Layout II
forked from anonymous's block: RefMet/CHEAR Overlap
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 1000, | |
| height = 1000, | |
| padding = 2, // separation between same-color circles | |
| clusterPadding = 6, // separation between different-color circles | |
| maxRadius = 12; | |
| var nodes = | |
| [{"radius": 21, "name": "Organooxygen Compound"}, {"radius": 1, "name": "Salt"}, {"radius": 1, "name": "Heterocyclic Compound"}, {"radius": 4, "name": "Organochlorine Compound"}, {"radius": 1, "name": "Nucleoside Phosphate"}, {"radius": 10, "name": "Carbonyl Compound"}, {"radius": 36, "name": "Carbohydrate Derivative"}, {"radius": 6, "name": "Benzenoid Aromatic Compound"}, {"radius": 26, "name": "Organohalogen Compound"}, {"radius": 1, "name": "Fatty Acid"}, {"radius": 1, "name": "Steroid"}, {"radius": 7, "name": "Ester"}, {"radius": 2, "name": "Phenols And Derivatives"}, {"radius": 4, "name": "Carboxylic Acid"}, {"radius": 4, "name": "Amino Acids, Peptides, And Analogues"}, {"radius": 1, "name": "N-Alkylpyrrolidine"}]; | |
| var clusters = new Array(nodes.length); | |
| var color = d3.scale.category10() | |
| .domain(d3.range(nodes.map(function(d){return d.name}))); | |
| var force = d3.layout.force() | |
| .nodes(nodes) | |
| .size([width, height]) | |
| .gravity(0.25) | |
| .charge(0) | |
| .on("tick", tick) | |
| .start(); | |
| d3.select("body svg").remove(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var radius = d3.scale.sqrt() | |
| .domain(d3.extent(nodes, function(d){return d.radius})) | |
| .range([30,70]); | |
| nodes.forEach(function(d) { | |
| d.r = radius(d.radius); | |
| }); | |
| var nodeGroup = svg.selectAll("g") | |
| .data(nodes) | |
| .enter().append("g"); | |
| var circle = nodeGroup.append("circle") | |
| .attr("r", function(d) { return d.r; }) | |
| .style("fill", function(d) { return color(d.name); }) | |
| .style("fill-opacity",0.75) | |
| .call(force.drag); | |
| var html = nodeGroup.append("svg:foreignObject") | |
| .attr("width", function(d) { return d.r*2;}) | |
| .attr("height", function(d) { return d.r*2;}) | |
| .attr("x", function(d) {return - d.r}) | |
| .attr("y", function(d) {return - d.r}); | |
| var body = html | |
| .append("xhtml:div") | |
| .style("height", "100%")//function(d) { return d.r*2;}) | |
| .style("display","flex") | |
| .style("justify-content","center") | |
| .style("align-items","center") | |
| // .style("vertical-align","middle") | |
| // .style("display", "table-cell") | |
| .append("div") | |
| .style("text-align","center") | |
| // .style("padding",0) | |
| // .style("position","fixed") | |
| // .style("left",0) | |
| // .style("top","50%") | |
| // .style("width","100%") | |
| // .style("display","inline-block") | |
| .style("font-family","arial, Verdana, Helvetica, sans-serif") | |
| .style("font-size",function(d) { return d.r/3+"px"; }) | |
| .attr("xmlns","http://www.w3.org/1999/xhtml"); | |
| body.append("div") | |
| .style("padding",0) | |
| .text(function(d) { | |
| return d.name; | |
| }); | |
| body.append("div") | |
| .style("padding",0) | |
| .text(function(d) { | |
| return "("+d.radius+")"; | |
| }); | |
| function tick(e) { | |
| nodeGroup | |
| .each(collide(.5)) | |
| .attr("transform", function(d) { | |
| return "translate("+d.x+","+d.y+")"; }) | |
| } | |
| // Resolves collisions between d and all other circles. | |
| function collide(alpha) { | |
| var quadtree = d3.geom.quadtree(nodes); | |
| return function(d) { | |
| var r = d.r + padding, | |
| nx1 = d.x - r, | |
| nx2 = d.x + r, | |
| ny1 = d.y - r, | |
| ny2 = d.y + r; | |
| quadtree.visit(function(quad, x1, y1, x2, y2) { | |
| if (quad.point && (quad.point !== d)) { | |
| var x = d.x - quad.point.x, | |
| y = d.y - quad.point.y, | |
| l = Math.sqrt(x * x + y * y), | |
| r = d.r + quad.point.r; | |
| if (l < r) { | |
| l = (l - r) / l * alpha; | |
| d.x -= x *= l; | |
| d.y -= y *= l; | |
| quad.point.x += x; | |
| quad.point.y += y; | |
| } | |
| } | |
| return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; | |
| }); | |
| }; | |
| } | |
| </script> |