d3js 各种力的仿真
d3js 是一种可以自由组合图形的库
我的理解，简单图形，比如柱形图，饼状图，条形图，要求不高可以直接用 echarts，自由度需要高些的使用 d3js，需要频繁交互的使用 pixi
偶然发现 d3js 可以进行各种力的模拟，学习后进行分析，希望大家能点个赞，让我有更多动力。点赞过十，下星期分享一篇 d3js 入门教程
效果如下
1. 创建数据
首先创建两组 JSON 数据，这里我使用的是网上的数据。一组数据记录了每个点的信息，另一组数据记录了连接信息。
// 结点信息的文件 node_data.json
[
{"x": 30.5, "y": 100.7, "r": 4},
...
]
// 连接信息的文件 edge_data.json
[
{"source": 0, "target": 98},
...
]
2. 代码结构
力的模拟分为四个步骤
- 加载数据
- 创建仿真变量
- 绑定数据并画出图形
- 在帧回调函数中更新图形
// step 1
const nodes = await d3.json("/force/node_data.json");
// step 2
const sim = d3.forceSimulation(nodes)
.force('力的名字', ...)
.on('tick', tick_function);
// step3
const node = svg.selectAll("circle")
.data(nodes)
.enter()
.append('circle');
// step4
tick_function(){
// 更新图形
}
3. 位置x和y的力
特定位置x，y有中拉力，将其他图形拉向自己，比如让特定位置为画框中心
const sim = d3.forceSimulation(nodes)
// 指定位置的拉力
.force('x', d3.forceX(width/2))
.force('y', d3.forceY(height/2));
可以设置力的大小，力如果越大，那么拉力越强，越小越弱
const sim = d3.forceSimulation(nodes)
// 指定位置的拉力
.force('x', d3.forceX(width/2).strength(0.06))
.force('y', d3.forceY(height/2).strength(0.06))
4. 碰撞力
如果不想让所有图形重合，那么就需要使用碰撞力，碰撞力以坐标为圆心，设置碰撞半径，碰撞半径内不会发生重合。比如让位置力和碰撞力结合
const sim = d3.forceSimulation(nodes)
// 指定位置的拉力
.force('x', d3.forceX(width/2).strength(0.06))
.force('y', d3.forceY(height/2).strength(0.06))
// 碰撞力, radius(碰撞半径)
.force('collide', d3.forceCollide().radius(10))
我们会发现有一些图形会有重合部分，这是因为我们设置了固定半径，有些图形的半径要大于固定半径，因此我们需要动态设置半径
const sim = d3.forceSimulation(nodes)
// 指定位置的拉力
.force('x', d3.forceX(width/2).strength(0.06))
.force('y', d3.forceY(height/2).strength(0.06))
// 碰撞力, radius(碰撞半径)
.force('collide', d3.forceCollide().radius(d=>d.r+1))
5. 原子力
这里是我自己的叫法，实际上这个力叫 many-body force，表示每个图形自身存在对其他图形的力，这个力如果是正数，代表了吸引力，如果这个力是负数，代表了排斥力
const sim = d3.forceSimulation(nodes)
// 原子力，正数吸引力
.force('charge', d3.forceManyBody().strength(7))
看下排除力
const sim = d3.forceSimulation(nodes)
// 原子力，正数吸引力
.force('charge', d3.forceManyBody().strength(-7))
当原子力为吸引力时，所有图形聚合起来了，不好看，加上碰撞力再看看效果
const sim = d3.forceSimulation(nodes)
// 碰撞力, radius(碰撞半径)
.force('collide', d3.forceCollide().radius(d=>d.r+1))
// 原子力，正数吸引力
.force('charge', d3.forceManyBody().strength(7))
看起来效果和位置力类似，但是核心内容完全不同，原子力代表每个图形自身都有对其他图形的力，而位置力是一个点对其他图形的吸引力
6. 链接力
表示连接线产生的力，类似于弹簧，远了就拉回来，近了就推出去
const sim = d3.forceSimulation(nodes)
// 链接力
.force('link', d3.forceLink(edges))
还是给链接力加个碰撞力，再加上刚刚了解的原子力看看效果
const sim = d3.forceSimulation(nodes)
.force('collide', d3.forceCollide().radius(d=>d.r+1))
// 原子力
.force('charge', d3.forceManyBody().strength(-7))
// 链接力
.force('link', d3.forceLink(edges))
有点鲜花盛开的感觉是不
7. 径向力
我们可以定义一个圆，这个圆上的每一点都会有个从圆心指向该点的力，会让所有图形集中再圆上
const sim = d3.forceSimulation(nodes)
// 径向力
.force('radial', d3.forceRadial(240, width/2, height/2))
径向力让所有图形在一个圆上并且图形直接由重合，不太美观，加其他力试试
const sim = d3.forceSimulation(nodes)
// 碰撞力
.force('collide', d3.forceCollide().radius(d=>d.r+1))
// 原子力
.force('charge', d3.forceManyBody().strength(-7))
// 径向力
// .force('radial', d3.forceRadial(240, width/2, height/2))
.force('radial', d3.forceRadial(d => d.r+200, width/2, height/2))
将径向力半径改为动态生成，加入碰撞力和原子力后是不是就好看多了
8. 中心力
中心力也是定义了一个圆，这个力有让图形移动到该圆内的趋势，这个力要与其他力配合使用
const sim = d3.forceSimulation(nodes)
// 碰撞力
.force('collide', d3.forceCollide().radius(d=>d.r+1))
// 原子力
.force('charge', d3.forceManyBody().strength(7))
// 中心力，规划
.force('center', d3.forceCenter(centerForce.x, centerForce.y))
9. 代码解析
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/lib/d3.v7.min.js"></script>
<script type="module">
const width=1000, height = 500;
const svg = d3.select("body")
.append("svg").attr('width', width).attr('height', height);
// 选取颜色色系
const color = d3.scaleOrdinal(d3.schemeTableau10)
async function load(){
// 加载数据
const nodes = await d3.json("/force/node_data.json");
const edges = await d3.json("/force/edge_data.json");
// 绑定数据并形成圆
const node = svg.selectAll("circle")
.data(nodes)
.enter()
.append('circle')
.attr("cx", d=>d.x)
.attr("cy", d=>d.y)
.attr("r", d=>d.r)
.attr("fill", (d, i)=>color(i));
// 绑定数据并形成线
const lines = svg.selectAll('lines')
.data(edges)
.enter()
.append('line')
.attr('x1',d=>nodes[d.source].x)
.attr('x2',d=>nodes[d.target].x)
.attr('y1',d=>nodes[d.source].y)
.attr('y2',d=>nodes[d.target].y)
.attr('stroke', "#5d5d66")
.attr('stroke-width', 2)
const centerForce = {
x: 700,
y: 250
}
// 创建中心力的圆
svg.append('circle')
.attr('cx', centerForce.x)
.attr('cy', centerForce.y)
.attr('r', 100)
.attr('stroke', '#6b6f80')
.attr('stroke-width', 3)
.attr('fill', "#00000000")
// 力的模拟
const sim = d3.forceSimulation(nodes)
// 指定位置的拉力
// .force('x', d3.forceX(width/2))
// .force('y', d3.forceY(height/2))
// .force('x', d3.forceX(width/2).strength(0.06))
// .force('y', d3.forceY(height/2).strength(0.06))
// 碰撞力
// .force('collide', d3.forceCollide().radius(10))
.force('collide', d3.forceCollide().radius(d=>d.r+1))
// 原子力
.force('charge', d3.forceManyBody().strength(7))
// 链接力
// .force('link', d3.forceLink(edges))
// 径向力
// .force('radial', d3.forceRadial(240, width/2, height/2))
// .force('radial', d3.forceRadial(d => d.r+200, width/2, height/2))
// 中心力，规划
.force('center', d3.forceCenter(centerForce.x, centerForce.y))
// .stop()
// .tick(100);
sim.on("tick", () => {
// sim 直接改变了
node.attr("cx", function(d){ return d.x;})
.attr("cy", function(d){ return d.y;});
lines.attr('x1',d=>d.source.x)
.attr('y1',d=>d.source.y)
.attr('x2',d=>d.target.x)
.attr('y2',d=>d.target.y);
})
}
load()
</script>
</body>
</html>
如果觉得不错的话，给个赞，有赞才能有动力呀，过十赞下星期写 d3js 入门教程