您的位置：首页 > Web前端 > JavaScript

d3js 各种力的仿真

2021-12-25 17:05 661 查看

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 入门教程

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航