• 我们在哪一颗星上见过 ,以至如此相互思念 ;我们在哪一颗星上相互思念过,以至如此相互深爱
  • 我们在哪一颗星上分别 ,以至如此相互辉映 ;我们在哪一颗星上入睡 ,以至如此唤醒黎明
  • 认识世界 克服困难 洞悉所有 贴近生活 寻找珍爱 感受彼此

全栈开发:D3:数据驱动文档

全栈开发 云涯 7个月前 (02-20) 349次浏览

概述

D3(或D3.js)是一个 JavaScript 库,用于使用 Web 标准可视化数据。D3 帮助您使用 SVG、Canvas 和 HTML 使数据栩栩如生。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合,为您提供现代浏览器的全部功能,并为您的数据设计合适的可视化界面的自由。

https://github.com/d3/d3

https://d3js.org/

 

力导向布局

D3力导向概述

力导向布局(force-directed layout)是一种基于物理学原理的图形布局算法,它使用节点之间的引力和斥力来决定节点在可视化图形中的位置。在D3中,力导向布局是通过d3-force模块实现的。

在力导向布局中,每个节点都是一个带有位置、速度和加速度的物体,节点之间的连线被看作是弹簧,节点与节点之间的引力、节点与节点之间的斥力以及每个节点的阻尼都被建模为物理量。这些物理量会在每个迭代步骤中更新,并且节点位置会根据当前速度和加速度更新。

D3力导向布局主要包括以下步骤:

  1. 创建一个力导向布局对象:使用d3.forceSimulation()函数创建一个力导向布局对象。
  2. 定义节点和边:使用nodes()links()函数分别定义节点和边。
  3. 配置节点和边的力属性:使用force()函数来配置节点和边的力属性,例如设置节点之间的斥力和吸引力的大小,以及阻尼大小等。
  4. 启动力导向布局:使用simulation.alpha(1).restart()函数启动力导向布局,将节点和边放置到初始位置并开始模拟力学运动。
  5. 监听布局的变化:使用simulation.on()函数来监听布局变化,例如节点和边的位置更新、力的变化等。
  6. 更新可视化图形:在每个布局变化事件发生时,使用D3的数据绑定和选择方法来更新可视化图形的位置和属性。

通过调整力导向布局的参数和添加其他交互性的功能,可以创建各种类型的动态可视化图形,例如网络图、关系图等。

力导向与SVG

SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言,它可以通过浏览器渲染为图像或动画。在D3中,SVG是默认的图形渲染引擎,因此力导向布局与SVG密切相关。

具体来说,D3力导向布局可以通过SVG元素来创建和呈现节点和连线。在创建力导向布局时,可以使用d3.forceSimulation()函数来创建一个力模拟器,并将节点和连线的位置属性绑定到SVG元素上,例如:

const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));

const link = svg.append("g")
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", d => Math.sqrt(d.value));

const node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", d => color(d.group))
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));

在上面的代码中,d3.forceSimulation()函数创建了一个力模拟器,并使用forceLink()forceManyBody()forceCenter()来定义节点之间的连线、节点的斥力和图形的中心位置。然后,使用SVG的line元素来呈现连线,使用circle元素来呈现节点,并将节点和连线的位置属性绑定到SVG元素上。同时,使用D3的drag()方法为节点添加拖动交互。

通过以上代码,我们可以将D3力导向布局中的节点和连线呈现为一个SVG图形,并且可以使用D3的数据绑定和选择方法来更新图形的位置和属性,从而实现交互式和动态的数据可视化效果。

其他力导向布局库

在JavaScript中,有许多力导向布局的库可供选择。以下是一些比较流行的库:

  1. D3.js:D3是一个JavaScript库,它提供了各种数据可视化功能,包括力导向布局。D3的力导向布局功能非常强大,它可以创建各种类型的动态可视化图形,例如网络图、关系图等,并且具有灵活的配置选项和丰富的交互性功能。
  2. Sigma.js:Sigma是一个基于WebGL的图形可视化库,它提供了各种类型的图形布局算法,包括力导向布局。Sigma的力导向布局算法快速且适合大型数据集,而且可以与其他布局算法和插件结合使用。
  3. Cytoscape.js:Cytoscape是一个基于WebGL的图形可视化库,它专注于生物信息学和网络科学领域,提供了各种类型的图形布局算法,包括力导向布局。Cytoscape的力导向布局算法支持各种常见的布局参数和约束,例如节点间距、重力、斥力等。
  4. Vis.js:Vis是一个JavaScript可视化库,提供了各种类型的图形布局算法,包括力导向布局。Vis的力导向布局算法可以实现各种类型的动态可视化效果,并支持多种数据格式和交互式操作。

这些库各有特点和优劣,具体选择取决于项目需求和个人偏好。如果需要灵活的数据绑定和定制化配置,D3.js是一个不错的选择。如果需要快速绘制大型网络图,并希望使用WebGL技术提高性能,可以考虑使用Sigma.js或Cytoscape.js。如果需要简单易用的API和多种数据格式的支持,可以考虑使用Vis.js。

 

D3 V7

在 D3 v7 版本中,d3.event 已经被移除了,可以通过将 d3-selection 模块作为依赖项引入,并使用 d3.pointer(event) 来代替 d3.mouse()d3.touches(),使用 event.sourceEvent 来代替 d3.event

例如,可以像下面这样更改 dragstarteddragged 函数:

function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}

function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}

function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}

然后在代码中引入 d3-selection 模块:

<script src="https://d3js.org/d3-selection.v2.min.js"></script>

 

 

 


云涯历险记 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:全栈开发:D3:数据驱动文档
喜欢 (0)