企业官网建设流程全解析

greuler高亮动画实战：用highlight系列API让节点与边瞬间聚焦

【免费下载链接】greulerGraph theory visualizations项目地址: https://gitcode.com/gh_mirrors/gr/greuler

greuler 是一款基于 d3 与 WebCola 的图论可视化工具，它把复杂的图结构渲染、自动布局和交互动画封装成极简 API，让开发者专注算法与数据本身。本文将带你实战 greuler 的高亮动画——通过 highlight 系列 API，用寥寥几行代码就能让节点放大聚焦、让边变色闪烁，轻松做出教程式、演示级的图论可视化效果。

上图展示的正是 greuler 自动布局后的图效果，节点布局由 WebCola 自动计算，无需手动指定坐标。

greuler 高亮动画是什么：一套开箱即用的聚焦效果

所谓高亮动画，就是"暂时性地让某个元素变得醒目，随后自动还原"的动态效果。greuler 把这种高频需求封装成了 5 个开箱即用的方法，全部集中在 Selector.js 中，统一返回 d3 selection 包装的 Promise，方便串行编排：

最快上手：highlightNode 高亮单个节点的三步走

在初始化 greuler 实例并调用update()之后，只需一行代码即可触发节点高亮：

const instance = greuler({ target: '#demo', data }).update() // 让 0 号节点瞬间放大聚焦，动画结束自动还原 instance.selector.highlightNode({ id: 0 })

内部实现非常直观：节点圆形的半径先过渡到原值的 1.5 倍，再过渡回原值，两次过渡共用一段总时长，形成"呼吸"式的聚焦脉冲。

highlightEdge 高亮边：默认红色还能自定义

边的默认高亮颜色是醒目的红色（#E74C3C）。如果你想让边以其他颜色闪烁，只需传入第二个参数覆盖默认配置：

// 默认红色脉冲 instance.selector.highlightEdge(instance.graph.edges[0]) // 自定义为天蓝色 instance.selector.highlightEdge(instance.graph.edges[0], { stroke: '#3498DB' })

注意：高亮是"临时"的，动画结束后边会恢复为原始描边颜色，不会污染你的数据。

一键高亮关联边：入射边、出边、入边一次说清

在演示 BFS、DFS 等图算法时，最常用的其实是"高亮某个节点的所有关联边"。greuler 提供了三个对称方法，搭配highlightNode使用效果最佳：

// 高亮节点 0 及其所有入射/出射边 instance.selector.highlightNode({ id: 0 }) instance.selector.highlightIncidentEdges({ id: 0 })

• highlightOutgoingEdges：只高亮从该节点出发的边，适合有向图；
• highlightIncomingEdges：只高亮指向该节点的边；
• highlightIncidentEdges：出入边全部高亮，适合无向图。

高亮动画时长控制：一个参数全局生效

所有高亮动画的时长都由初始化时的animationTime参数统一控制，单位毫秒：

greuler({ target: '#demo', animationTime: 400, data }).update()

数值越小动画越急促，适合强调"瞬间"；数值越大越舒缓，适合教学演示逐步讲解。这一参数同样作用于节点位移、边布局等其他过渡动画，保持全站节奏一致。

进阶实战：链式高亮动画与算法演示

因为高亮方法返回 Promise，你可以用async/await轻松编排复杂动画。比如在 api-selector.js 中就有经典范例——让图中所有节点按顺序依次高亮：

(async function () { for (const node of instance.graph.nodes) { await instance.selector.highlightNode(node) } })()

更复杂的用法可以参考 example-bfs.js：它把highlightNode与traverseAllEdgesBetween结合起来，模拟 BFS 遍历时"节点点亮 + 边线流动"的完整过程，非常适合制作算法可视化教程。

总结：3 条让高亮动画更专业的建议

1. 组合使用：高亮节点时同步高亮其关联边，信息层级立刻清晰；
2. 控制节奏：链式动画记得await，避免多个过渡互相抢占；
3. 自定义颜色：用第二个参数传入stroke，让不同语义（访问过/未访问）颜色区分。

greuler 的 highlight 系列 API 虽小，却是把静态图变成"会讲故事"的动态可视化作品的关键拼图。从今天起，让每个节点与边都能瞬间聚焦吧！

【免费下载链接】greulerGraph theory visualizations项目地址: https://gitcode.com/gh_mirrors/gr/greuler