Built with blockbuilder.org
xxxxxxxxxx<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><div id="viz"> <svg class="main"> </svg></div></body><script>var start = 0var randomPoints = d3.range(500).map(function (d,i) { return {value: Math.random(), key: i}}) //构建randomPoints 数组 为开始的动画做准备 定一个结构// var randomPoints = []var currentTick = 500var 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/requestAnimationFramefunction 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