Bounding Circle

<!DOCTYPE html>
<head>
  <title>Bounding circle Collision</title>
  <meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
  svg {
    height: 600px;
    width: 1200px;
    border: 1px solid lightgray;
  }
</style>
<body>

var start = 0

var randomPoints = d3.range(500).map(function (d,i) {
  return {value: Math.random(), key: i}
}) //构建randomPoints 数组 为开始的动画做准备 定一个结构
// var randomPoints = []

var currentTick = 500

var networkCenter = d3.forceCenter().x(600).y(300); //设定（600，300）为世界中心

var forceX = d3.forceX(function (d) {return d.value * 1200})
    .strength(0.5)

var forceY = d3.forceY(function (d) {return 200})
    .strength(0.03)

var collide = d3.forceCollide(function (d,i) {
    return d.value * 20
  }) ///设置碰撞力的半径
  .strength(0.5)
  .iterations(1) //则将每个应用程序的迭代次数设置为指定的数字，并返回这个力 这个没必要写，默认就是1

// var color = d3.scaleOrdinal(["#8a2b57", "#b13e1f", "#aa8d0f", "#b67221"])
var color = d3.scaleOrdinal(d3.schemeCategory10);
//创建一个颜色比例尺 其实还有不错的比例尺
//创建一个颜色比例尺 var color = d3.scaleOrdinal(d3.schemeCategory10);
d3.select("svg.main")
  .append("g")
  .attr("class", "viz")

// 时间动画 参考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  particles(progress);
    window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);
// 把上面时间动画注释了 直接执行particles()，你每次刷新页面就会随机给你生成不同位置且有序很多矩形
// particles()
function particles(progress) { //progress不必要传

var nodeEnter = d3.select("g.viz")
  .selectAll("g.node")
  .data(randomPoints, function (d) {return d.key})
  .enter()
  .append("g")
  .attr("class", "node") //这段代码是处理：有多余数据，但是没有足够的元素 就添加元素

var nodeExit = d3.select("g.viz")
  .selectAll("g.node")
  .data(randomPoints, function (d) {return d.key})
  .exit()
  .remove() //相反如果存在多余元素，且没有数据跟它绑定，就删除掉

nodeEnter.append("circle")
    .attr("class", "base")
    .style("stroke-width", "1px")
    .style("stroke", function (d, i) {return d3.color(color(d.key)).darker(1)})
    .style("fill", function (d, i) {return d3.color(color(d.key)).brighter(1)})

var force = d3.forceSimulation(randomPoints)
    .velocityDecay(0.6) // 摩擦力
    .force("center", networkCenter) //设定重力中心，那么（250，250）的中心，所有节点都会“落入世界的中心”
    .force("x", forceX)
    .force("y", forceY)
    .force("collide", collide)
    // .on("tick", updateNetwork)   //此方法可以设置力导向图的更新方法 此图 没做任何用处
    .stop()

force.tick() //动画的计算进入下一步

d3.selectAll("circle")
    .attr("r", function (d) {return d.value * 20})
    .attr("cx", function (d) {return d.x + -d.value * 10})
    .attr("cy", function (d) {return d.y + -d.value * 20})   // 创建圆形

randomPoints.forEach(function (d) {
    d.value = d.value - 0.003
  }) //对数组randomPoints 做一个减法
  randomPoints = randomPoints.filter(function (d) {return d.value > 0}) // 删除value大1
  randomPoints.push({value: 1.25, x: 1300, y: Math.random() * 500 + 100, key: currentTick += 1})

}

</script>

https://d3js.org/d3.v4.min.js