D3介绍
D3 的全称是（Data-Driven Documents），顾名思义，是一个被数据驱动的文档。简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。
学习网站
学习网站：https://d3js.org/
D3力导向图
- 背景
力导向图非常适合于渲染关系型信息图。 - 力导向图（Force-directed）
我们可以把整张 Network 想象成一个物理仿真系统(Simulation)。系统中的每个节点(Node)都是一个带有能量的粒子，粒子与粒子之间存在斥力（如模拟库伦斥力），而被(Link)所连结的粒子受到牵引力（如模拟胡克弹力）。系统中的粒子在斥力和引力的不断作用下，从随机无序的布局(Layout)不断发生位移，逐渐趋于平衡有序的布局。同时整个仿真系统的能量也在不断消耗，经过数次迭代后，粒子之间不再发生相对位移，整个系统达到最终稳定平衡的状态。
此动效实现的本质就是每一帧都重新渲染图中节点的位置(x,y), 节点的位置(x,y)是由节点上一帧所处的位置(x,y)+速度(vx,vy)所决定的。而速度就是通过力学模型所计算出来的。
关键在于力(Forces)，D3.js 中内置了几种经典的力模型：
1.中心力(Centering)
中心力可以使得节点最终布局是围绕着某个中心的。相当于某个中心点对所有的节点都有一个制约，不会让布局的中心偏离。
2.碰撞力(Collision)
- 碰撞力为每个节点都设定一个圆形的碰撞区域，从而防止节点之间重叠。
- 关键参数：radius 碰撞半径
3.牵引力(Links)
- 牵引力的强度与节点之间的距离成正比，类似于弹簧力。
- 关键参数：distance。影响两个节点之间的最终距离。
4.N 体力(Many-Body)
N体问题是天体力学的一种力学模型，它研究 N 个质点相互之间在万有引力作用下的运动规律。
- Many-Body 力是作用于所有节点之间的，是全局的，任何两个节点之间都将受到此力的影响。（与 牵引力 Links 不同，Links 力仅仅会影响有连接关系的两个节点）
- 它可以用来模拟引力（吸引力），只需设置的 strength 参数为正数；
- 它也可用来模拟电荷力（排斥力），只需设置的 strength 参数为负数。
- 实现算法使用了 the Barnes–Hut approximation（通过将平面不断递归地划分成四个小区域来构建一棵四叉树） 来提高性能。
5.方向力(Positioning)
方向力分为 X 方向和 Y 方向，即将作用力限制在一个维度上（ X 维度或者 Y 维度）
安装
- 用npm安装：
npm install d3-force - 下载安装：https://github.com/d3/d3-force/releases/tag/v1.2.1
- 之后在页面中引入
<script src="https://d3js.org/d3.v5.min.js"></script> - 若是vue项目引入：
import * as d3 from 'd3'即可
大概思路
-
首先你需要有数据源（包括人物，人物关系）
-
然后你需要动态计算人物的节点位置（node position） 以及 人物的关系连线（line 的起点和终点）
-
有了点和线，你就可以通过svg标签进行绘制了。
-
最后如果你想要图美观一些的话可以加点样式和动画，如果要求再高一些，可以加一些dom事件。
以上四个步骤中，你唯一不会的是哪步？没错就是第二步，如何计算的问题！
构建布局
/* 相关API
d3.forceSimulation - 创建一个力模拟。
simulation.restart - 重启力模拟。
simulation.stop - 停止力模拟。
simulation.tick - 将力模拟向前推进一步。
simulation.nodes - 设置力模拟的节点。
simulation.alpha - 设置当前的α值。
simulation.alphaMin -设置α最小阈值。
simulation.alphaDecay - 设置α指数衰减率。
simulation.alphaTarget - 设置目标α。
simulation.drag - 设置曳引系数。
simulation.force - 添加或移除力。
simulation.fix - 固定节点位置。
simulation.unfix - 释放固定的节点。
simulation.find - 查找给定位置最近的节点。
simulation.on - 添加或移除事件监听器。
force - 应用力模拟。
force.initialize - 使用给定的节点初始化力布局。
d3.forceCenter - 创建一个力中心。
center.x - 设置中心的x-坐标。
center.y - 设置中心的y-坐标。
d3.forceCollide - 创建一个圆碰撞力。
collide.radius - 设置圆的半径。
collide.strength - 设置碰撞检测强度。
collide.iterations - 设置迭代次数。
d3.forceLink - 创建连接力。
link.links - 设置连接数组。
link.id - 连接数组。
link.distance - 设置连接距离。
link.strength - 设置连接强度。
link.iterations - 设置迭代次数。
d3.forceManyBody - 创建多体力。
manyBody.strength - 设置力强度。
manyBody.theta - 设置Barnes-Hut近似精度。
manyBody.distanceMin - 当节点关闭限制力。
manyBody.distanceMax - 当节点太远限制力。
d3.forceX - 创建x-定位力。
x.strength - 设置力强度。
x.x - 设置目标x-坐标。
d3.forceY - 创建y-定位力。
y.strength - 设置力强度。
y.y - 设置目标y-坐标。
*/
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
画布
html5画布有两种，svg和canvas
1.svg
- svg是什么
svg是一种二维的可缩放的矢量图形，用xml格式定义的图形，可直接放在html中使用
- 特点
- 矢量图形放大缩小不会失真
- 可对元素添加javascript事件处理
- 可在节点上直接修改属性
- 不能用于游戏开发
2.canvas
- canvas是什么
canvas通过js来画2D的图形
- 特点
- 放大会失真
- 不支持js事件处理
- 能以.jpg .png格式保存
- 适合游戏开发
enter exit 选择器
D3 的 enter 和 exit 选择器，可以使用新进数据创建节点，同时抛弃不需要的节点。
- enter
在将数据绑定到选择结果时，每个数值都被分配到了对应的选择元素。如果选择元素的数量比数据数量要少，多余的数据则进入了 enter 选择器，比如：
<template> <div id="force"> <p></p> <p></p> <p></p> </div> </template> <script> export default { data() { return {}; }, mounted() { var p = d3 .select("body") .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(item) { return "I’m number " + item; }); /** * 增加节点 */ p.enter() .append("p") .text(function(item) { return "I am " + item; }); } }; </script>
- exit
<template> <div id="force"> <p></p> <p></p> <p></p> </div> </template> <script> export default { data() { return {}; }, mounted() { var p = d3 .select("body") .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(item) { return "I’m number " + item; }); /** * 删除节点 */ p.exit().remove(); } }; </script>
