d3-force many body fix

forked from esjewett's block: fresh block

forked from esjewett's block: d3-force collide fix

<!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 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>