D3 Examples - d3-force many body fix

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    line {
  stroke: #ccc;
}
​
circle {
  stroke: none;
  stroke-width: 40px;
}
​
.nodes1 {
  fill: grey;
}
​
.nodes2 {
  fill: blue
}
  </style>
  <script src="d3.js"></script>
</head>
​
<body>
  <svg height="200px" width="200px"></svg>
  <script>
    var nodes1 = [{a: "a"}, {a: "b"}, {a: "c"}]
var nodes2 = [{a: "d"}, {a: "e"}, {a: "f"}]
var nodes = nodes1.concat(nodes2)
console.log(nodes);
var links = [{
    source: nodes1[0],
  target: nodes1[1]
}, {
    source: nodes1[2],
  target: nodes2[2]
}, {
    source: nodes1[0],
  target: nodes2[1]
}]
​
function isolate(force, filter) {
  var initialize = force.initialize;
  force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
  return force;
}
​
var s = d3.select('svg')
​
var tick = function() {
    s
    .selectAll('circle')
        .data(simulation.nodes())
    .attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';
    })
    
  s.selectAll('line')
    .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; });
}
​
var simulation = d3.forceSimulation(nodes);
  
simulation
  .force('manybody1', isolate(d3.forceManyBody().strength(-100), function(d) { return nodes1.indexOf(d) !== -1; }))
  .force('manybody2', isolate(d3.forceManyBody().strength(-100), function(d) { return nodes2.indexOf(d) !== -1; }))
  .force('yposition', d3.forceY(100))
  .force('xposition', d3.forceX(100))
​
s
  .selectAll('circle.nodes1')
    .data(nodes1)
  .enter()
    .append('circle')
        .attr('class', 'nodes1')
      .attr('r', 10)
      
s
  .selectAll('circle.nodes2')
    .data(nodes2)
  .enter()
    .append('circle')
        .attr('class', 'nodes2')
      .attr('r', 10)
      
s.selectAll('line')
        .data(links)
  .enter()
    .append('line')
​
simulation.on('tick', tick)
  </script>
</body>
​
    