D3 Examples - Grouped Force Layout

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
​
​
path {
    opacity: 0.4;
    stroke-width: 0px;
    pointer-events: none;
​
}
​
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var color = d3.scaleOrdinal(d3.schemeCategory20);
​
​
var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);
​
​
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(function(link) {   
      if (link.source.group == link.source.target) {
        return 1;
      }
      else {
        return 0.1
      }   
      }) 
    )
    .force("charge", d3.forceManyBody().strength(-20))
    .force("center", d3.forceCenter(width / 2, height / 2));
​
d3.json("data.json", function(error, graph) {
  if (error) throw error;
​
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
​
  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
​
  node.append("title")
      .text(function(d) { return d.id; });
​
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);
​
  simulation.force("link")
      .links(graph.links);
      
      
  // append voronoi  
  var cells = svg.selectAll()
  .data(simulation.nodes())
  .enter().append("g")
  .attr("fill",function(d) { return color(d.group); })
  .attr("class",function(d) { return d.group })
​
  var cell = cells.append("path") 
    .data(voronoi.polygons(simulation.nodes()))
    
​
  function ticked() {
    var alpha = this.alpha();
    var nodes = this.nodes();
  
    var coords ={};
    var groups = [];
    
    // sort the nodes into groups:  
    node.each(function(d) {
        if (groups.indexOf(d.group) == -1 ) {
            groups.push(d.group);
            coords[d.group] = [];
        }
        
        coords[d.group].push({x:d.x,y:d.y});    
    })
        
    // get the centroid of each group:
    var centroids = {};
        
    for (var group in coords) {
        var groupNodes = coords[group];
        
        var n = groupNodes.length;
        var cx = 0;
        var tx = 0;
        var cy = 0;
        var ty = 0;
        
        groupNodes.forEach(function(d) {
            tx += d.x;
            ty += d.y;
        })
        
        cx = tx/n;
        cy = ty/n;
        
        centroids[group] = {x: cx, y: cy}   
    }   
        
    // don't modify points close the the group centroid:
    var minDistance = 10;
    
    if (alpha < 0.1) {
        minDistance = 10 + (1000 * (0.1-alpha))
    }
       
    // adjust each point if needed towards group centroid:
    node.each(function(d) {
        var cx = centroids[d.group].x;
        var cy = centroids[d.group].y;
        var x = d.x;
        var y = d.y;
        var dx = cx - x;
        var dy = cy - y;
​
        var r = Math.sqrt(dx*dx+dy*dy)
            
        if (r>minDistance) {
            d.x = x * 0.9 + cx * 0.1;
            d.y = y * 0.9 + cy * 0.1;
        }
    })
​
    // update voronoi:
    cell = cell.data(voronoi.polygons(simulation.nodes())).attr("d", renderCell);
  
    // update links:
    link
        .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; });
​
    // update nodes:
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
  
​
  
  
  
});
​
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
​
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
​
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
​
​
function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}
​
</script>
​
    