What is D3.js
D3.js 是一个开源的 JavaScript 库,用于使用 SVG、HTML 和 CSS 在 Web 浏览器中生成动态的交互式数据可视化。
除了 D3 之外,还有其它流行且功能强大的库,例如 ECharts 和 Chart.js。但是,它们是高度封装的,因此留下的定制空间太小。
相反,D3 由于支持 SVG 元素的事件处理,因此是高度可定制的。它可以将任意数据绑定到文档对象模型 (DOM) 或直接在 DOM 上运行 W3C DOM API。
对于那些想要完全控制图形布局的人来说,D3 绝对是一个首选。
D3-Force有向图
对于社交网络分析,D3-force 有向图是最佳选择。它是在 D3 中通过模拟粒子动力学的 Velocity Verlet 数值算法实现的模块。D3-force 中的每个结点都可以看作是一个电子,电子之间存在斥力(Coulomb repulsion)。同时,这些粒子通过它们之间的边连接,从而产生牵引力。
由于排斥和牵引,D3-force 中的粒子不断从随机无序的初始状态转变为平衡有序的布局。Velocity Verlet 数值算法控制粒子和边的顺序。使用 d3-force 生成的图形仅包含结点和边,并且只有一小部分图形例子可供参考,因为大多数图形都是自定义的。
以下是我发现的用 D3-force 实现的流行网络图。显然,对于某些用例来说,这太简单了。因此,如果您的图形比这更复杂,那么您必须创建自己的图形。
构建 D3-Force 有向图
在 NebulaGraph Studio 中,我们使用 D3-force 有向图来分析数据关系,因为结点和边直观地显示了数据连接,并且它允许通过图查询语言进行图探索。此外,可以通过将 DOM 上的操作同步到数据库来更新图形数据(这部分得另一篇文章来介绍)。
让我们构建一个简单的 D3-force 有向图来说明 D3.js 如何显示数据连接,并基于此示例分享一些布局优化思路。
this.force = d3
.forceSimulation()
// Assign coordinates to nodes
.nodes(data.vertexes)
// Connect edges
.force('link', linkForce)
// The instance center
.force('center', d3.forceCenter(width / 2, height / 2))
// Gravitation
.force('charge', d3.forceManyBody().strength(-20))
// Collide force to prevent nodes overlap
.force('collide',d3.forceCollide().radius(60).iterations(2));
上面的代码生成一个图形,如下所示:
图展示布局优化
上图仅显示起始结点的单跃点关系。两跳或三跳关系怎么样?答案是 D3.js enter() API。
D3.js 的 enter() API 独立处理新结点。当查询新结点并将其推送到结点数组中时,API 会根据 D3-force 实例分配的坐标呈现它们,而不会更改现有结点的信息(包括 x、y 坐标)。
从 API 的角度来看,这绝对是可以理解的。但是因为 d3.forceSimulation() 模块随机分配位置坐标,新添加的结点不能仅仅通过简单地推送到现有的 D3-force 实例来处理。
d3.forceSimulation().node() 分配的坐标是随机的,已呈现的结点的位置也是随机的。通过碰撞和链接参数的作用,与新结点相关的结点的在牵引力的影响下彼此靠近。 此外,在接近过程中,其它结点之间存在碰撞。当力导向图上有结点时,这些新添加的结点会使整个图在碰撞和牵引的作用下发生碰撞,直到每个结点都找到自己的位置。这意味着只有当碰撞和牵引力都满足要求时,运动才会停止。它看起来像大爆炸吗?
上述过程中存在两个问题:
- 添加新结点将导致整个图形不断移动
- 稳定需要相对较长的时间
但是,这就是 enter() API 的设计方式。
一种解决方案是分别处理新结点和现有结点,这意味着每个结点渲染都需要遍历来确定它是新的还是现有的。不是一个高性能的解决方案,尤其是当数量很大时。
另一种常见的解决方案是减少碰撞并增加 D3-force 实例的牵引力。通过这种方式,结点可以更快地找到平衡状态,从而使整个图形稳定。这是一个更好的解决方案,但缺点是它使结点之间的连接长度差异极大,并且图形大小会很大。因此,对于拥有大量数据的情况,这不是理想的解决方案。
我们提出了一个新的解决方案。
这个想法是为了确保新结点围绕源结点。代替 D3.forceSimulation().node() 分配,将新结点的坐标设置为与源结点的坐标相同。D3-force 实例的结点冲突保证了新结点的外观不会被覆盖,最终会出现在源结点周围。
虽然这样的解决方案仍然影响小范围内的结点,但不会对整个图的趋势产生太大影响。关键代码如下:
# Set the new nodes coordinates as the source node center or the entire graph center
addVertexes.map(d => {
d.x = _.meanBy(selectVertexes, 'x') || svg.style('width') / 2;
d.y = _.meanBy(selectVertexes, 'y') || svg.style('height') / 2;
});
如果没有源结点,则新结点将显示在图形的中心。这将对现有结点造成较小的影响,因此值得考虑。
两个结点之间多边显示的布局优化
当两个结点之间有多个边时,会出现以下问题:
- 默认直线将相互覆盖。因此,在这种情况下,曲线是更好的选择。
- 如何定义曲线的曲率以确保没有覆盖?
- 当你有多个曲线时,如何确保平均半圆弧不在某个半圆上?
以下是我们如何解决上述问题:
- 首先计算任意两个结点之间的边,并将它们分组到一个 map 中,map中的 key 基于所涉及的两个结点的名称。
- 然后按方向将同一 map 中的边分为两组。有很多方法可以确定边的方向,这里我们采用比较结点的 source.name 和 target.name 的 ASCII 码的方法。为每个具有正方向的边设置一个 linknum(链接值)。同样,为每条方向为负的边设置 -linknum。我们设置的 linknum 值用于确定弧的曲率和弯曲方向。
请参阅以下代码以更好地理解:
const linkGroup = {};
// Set the edges between two nodes as the same key based on their name property.
// Then add the key to the linkGroup, making all edges a group
edges.forEach((link: any) => {
const key =
link.source.name < link.target.name
? link.source.name + ':' + link.target.name
: link.target.name + ':' + link.source.name;
if (!linkGroup.hasOwnProperty(key)) {
linkGroup[key] = [];
}
linkGroup[key].push(link);
});
// Traverse each group to call setLinkNumbers to allocate linknum
edges.forEach((link: any) => {
const key = setLinkName(link);
link.size = linkGroup[key].length;
const group = linkGroup[key];
if (group[group.length - 1] === link) {
setLinkNumbers(group);
}
});
// Divide the edges into linkA and linkB based on their directions.
// Then allocate two kinds of linknum to control the upper and lower elliptical arc.
export function setLinkNumbers(group) {
const len = group.length;
const linksA: any = [];
const linksB: any = [];
for (let i = 0; i < len; i++) {
const link = group[i];
if (link.source.name < link.target.name) {
linksA.push(link);
} else {
linksB.push(link);
}
}
let startLinkANumber = 1;
linksA.forEach(linkA=> {
linkA.linknum = startLinkANumber++;
}
let startLinkBNumber = -1;
linksB.forEach(linkB=> {
linkB.linknum = startLinkBNumber--;
}
}
将 linknum 分配给每条边后,在监视边的 tick 事件函数中判断 linknum 的符号。我们只需要判断和设置路径的曲率和方向。
下面是它的外观:
结论
这就是我们优化 D3.js 力导向图的方式。如果您正在建立复杂的关系,则有许多问题需要关注和优化。
在本文中,我们分享了两种最常见的场景,即呈现新结点和在两个结点之间存在多个边的情况。我们将在未来分享更多的经验。敬请期待!
尝试使用 NebulaGraph Studio 体验 D3.js 可视化。在下面给我们留言,或者如果有任何问题,请前往我们的论坛。
Hi,我是 NebulaGraph 的前端工程师 Nico。我对数据可视化感兴趣,并想分享我在这方面的经验。希望我的帖子对您有所帮助。如果您对此有任何想法,请告诉我。谢谢!
原文地址:https://www.nebula-graph.io/posts/d3-force-layout-optimization