如何在D3力模拟中实现盘形?

var canvas = d3.select("canvas");
var width = +canvas.attr("width");
var height = +canvas.attr("height");
var context = canvas.node().getContext('2d');

// Key variables:
var nodes = [];
var strength = -0.25;         // default repulsion
var centeringStrength = 0.01; // power of centering force for two clusters
var velocityDecay = 0.15;     // velocity decay: higher value, less overshooting
var outerRadius = 250;        // new nodes within this radius
var innerRadius = 100;        // new nodes outside this radius, initial nodes within.
var startCenter = [250,250];  // new nodes/initial nodes center point
var endCenter = [710,250];	  // destination center
var n = 200;		          // number of initial nodes
var cycles = 1000;	          // number of ticks before stopping.



// Create a random node:
var random = function() {
	var angle = Math.random() * Math.PI * 2;
	var distance = Math.random() * (outerRadius - innerRadius) + innerRadius;
	var x = Math.cos(angle) * distance + startCenter[0];
	var y = Math.sin(angle) * distance + startCenter[1];

	return { 
	   x: x,
	   y: y,
	   strength: strength,
	   migrated: false
	   }
}

// Initial nodes:
for(var i = 0; i < n; i++) {
	nodes.push(random());
}
	
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(function(d) { return d.strength; } ))
	.force("x1",d3.forceX().x(function(d) { return d.migrated ? endCenter[0] : startCenter[0] }).strength(centeringStrength))
	.force("y1",d3.forceY().y(function(d) { return d.migrated ? endCenter[1] : startCenter[1] }).strength(centeringStrength))
	.alphaDecay(0)
	.velocityDecay(velocityDecay)
    .nodes(nodes)
    .on("tick", ticked);

var tick = 0;
	
function ticked() {
	tick++;
	
	if(tick > cycles) this.stop();
	
	nodes.push(random()); // create a node
	this.nodes(nodes);    // update the nodes.

  var migrating = this.find((Math.random() - 0.5) * 50 + startCenter[0], (Math.random() - 0.5) * 50 + startCenter[1], 10);
  if(migrating) migrating.migrated = true;
  
	
	context.clearRect(0,0,width,height);
	
	nodes.forEach(function(d) {
		context.beginPath();
		context.fillStyle = d.migrated ? "steelblue" : "orange";
		context.arc(d.x,d.y,3,0,Math.PI*2);
		context.fill();
	})
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<canvas width="960" height="500"></canvas>

const svg = d3.select("svg")
const data = d3.range(500).map(() => ({}));

const simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(200))
  .force("y", d3.forceY(120))
  .force("collide", d3.forceCollide(4))
  .stop();

for (let i = 300; i--;) simulation.tick();

const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 2)
  .style("fill", "tomato")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="300"></svg>

const radius = 2;
let index = 0;
const limit = 500;
const svg = d3.select("svg")
const data = d3.range(500).map(() => ({
  x: 80 + Math.random() * 40,
  y: 80 + Math.random() * 40
}));

let circles = svg.selectAll(null)
  .data(data);
circles = circles.enter()
  .append("circle")
  .attr("r", radius)
  .style("fill", "tomato")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .style("opacity", 0)
  .merge(circles);

const simulation = d3.forceSimulation()
  .force("x", d3.forceX(500))
  .force("y", d3.forceY(100))
  .force("collide", d3.forceCollide(radius * 2))
  .stop();

function ticked() {
  circles.attr("cx", d => d.x)
    .attr("cy", d => d.y);
}

d3.select("button").on("click", function() {
  simulation.on("tick", ticked).restart();
  const timer = d3.interval(function() {
    if (index > limit) timer.stop();
    circles.filter((_, i) => i === index).style("opacity", 1)
    const newData = data.slice(0, index++)
    simulation.alpha(0.25).nodes(newData);
  }, 5)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Click</button>
<svg width="600" height="200"></svg>