企业官网建设流程全解析

G6 菱形节点（Diamond）完整使用指南：从配置到源码实现

【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6

菱形节点（Diamond）是 G6 图可视化框架内置的十种基础节点之一，用于在流程图、决策树、网络图等场景中表示决策节点、条件判断与关键路径。本文基于 G6 仓库中的 Diamond 官方文档 展开，结合节点源码与单元测试，系统讲解菱形节点的启用方式、样式体系、几何原理与典型应用，帮助开发者快速在业务图中落地"判断/决策"语义的可视化表达。

菱形节点的定位与适用场景

菱形是一个四边相等、具有对角线对称性的几何形状。在图形化表达中，菱形天然与"分支""判断"绑定在一起，是流程建模领域的通用符号。G6 文档明确给出了它的典型适用场景：

• 用于表示决策节点、条件判断或关键路径；
• 适合表示流程图中的判断节点或关键步骤；
• 常用于流程图、决策树、网络图等。

因此，当你的数据中有一类节点承担"是否满足条件""走哪条分支"的语义时，优先考虑用菱形节点将其与其他普通节点区分开，配合颜色、图标、徽标等样式即可快速构建出语义清晰的决策型图谱。

快速上手：一行配置启用菱形节点

在 G6 中，节点的形状由node.type决定。将type设置为diamond即可把节点渲染为菱形，无需注册任何额外扩展：

import { Graph } from '@antv/g6'; const graph = new Graph({ container: 'container', autoFit: 'center', data: { nodes: [{ id: 'node1', style: { size: [48, 24], fill: '#7e3feb' } }], }, node: { type: 'diamond', }, plugins: [{ type: 'grid-line', size: 30 }], }); graph.render();

上述示例与 Diamond 在线体验文档 中嵌入的 playground 一致：默认数据使用size: [48, 24]的宽扁菱形，填充色为#7e3feb，并叠加网格线插件辅助观察形状。该 playground 还通过 GUI 面板暴露了diamond.style.size[0]与size[1]两个维度（取值范围 0～100，步长 1），拖动滑块即可实时看到菱形宽高变化，内部实现等价于调用graph.updateNodeData([{ id: 'node1', style: { size: [w, h] } }])后重新graph.render()。

需要特别说明：node.type支持动态配置，即根据节点数据按需决定渲染为菱形还是其他形状：

const graph = new Graph({ node: { // 普通函数形式（this 指向 graph 实例） type: function (datum) { return datum.data.category === 'decision' ? 'diamond' : 'circle'; }, }, });

菱形节点的几何原理与源码实现

了解底层实现有助于更精准地控制菱形外观。菱形节点在源码层面非常轻量：它继承自多边形基类，本身只负责"计算顶点坐标"。

核心实现在 packages/g6/src/elements/nodes/diamond.ts：

export interface DiamondStyleProps extends PolygonStyleProps {} export class Diamond extends Polygon { constructor(options: DisplayObjectConfig<DiamondStyleProps>) { super(options); } protected getPoints(attributes: Required<DiamondStyleProps>): Point[] { const [width, height] = this.getSize(attributes); return getDiamondPoints(width, height); } }

从中可以得出三点结论：

1. DiamondStyleProps 未新增任何独有属性——它直接继承PolygonStyleProps，因此文档中"菱形没有特有样式属性，通用样式见 BaseNode"的说明与源码完全吻合。
2. 顶点坐标由getSize的结果决定：菱形宽高由size样式派生，getDiamondPoints(width, height)在 packages/g6/src/utils/element.ts 中实现：

export function getDiamondPoints(width: number, height: number): Point[] { return [ [0, -height / 2], // 上顶点 [width / 2, 0], // 右顶点 [0, height / 2], // 下顶点 [-width / 2, 0], // 左顶点 ]; }

四个顶点恰好落在以节点中心为原点、宽为width、高为height的菱形四角上，这就是"四边相等、对角线对称"的数学来源——当width === height时，它是一个标准正方形旋转 45° 的形状。

3. 渲染链路复用多边形体系：packages/g6/src/elements/shapes/polygon.ts 中的Polygon抽象类负责调用drawKeyShape将顶点绘制为@antv/g的GPolygon图形，并基于顶点计算边的交点（getIntersectPoint），因此连接到菱形节点上的边会自动贴合菱形轮廓，无需额外处理。

提示：triangle（三角形）、hexagon（六边形）等节点与 Diamond 同属 Polygon 体系，结构完全一致，理解菱形即可触类旁通。

样式配置体系：菱形继承自 BaseNode 的全部能力

Diamond 没有专属样式，因此它的全部可配置能力都来自节点通用配置项（见 BaseNode 文档）。一个完整的 G6 节点由以下原子图形构成：

• key：主图形，即菱形本身；
• label：文本标签，展示节点名称或描述；
• icon：图标图形，支持文字、图片与 IconFont 三类；
• badge：徽标，默认位于节点右上角，可多枚并存；
• halo：主图形周围的光晕效果；
• port：连接桩，用于连接边。

在node.style下，上述每一部分都有独立的样式前缀。对菱形节点最常用的配置如下。

主图形样式

控制菱形的外观本体，包括填充、描边、大小、阴影、透明度、虚线等。关键项：

其中size支持三种写法：number（宽高相同）、[number, number]（宽度、高度）、[number, number, number]（宽度、高度、深度）。由于菱形的长宽比由它决定，决策节点想突出"判断"语义时，可像在线体验示例那样设置为宽扁的[48, 24]。

标签与图标样式

标签前缀为label：labelText设置文字内容（支持(datum) => string函数式动态配置），labelFill、labelFontSize、labelPlacement（可选left/right/top/bottom/center及组合方位）控制外观与位置，labelBackground可叠加背景，labelWordWrap与labelMaxWidth支持多行自动折行。

图标前缀为icon，有三种使用方式：

• 文字图标：iconText: 'A'配合iconFill、iconFontSize；
• 图片图标：iconSrc指向图片地址（优先级高于iconText），配合iconWidth/iconHeight；
• IconFont 图标：先引入字体文件，再设置iconFontFamily与iconText。

在菱形节点中嵌入 IconFont 图标的写法（下文综合示例将完整使用）：

import { Graph, iconfont } from '@antv/g6'; const style = document.createElement('style'); style.innerHTML = `@import url('${iconfont.css}');`; document.head.appendChild(style);

光晕、徽标与连接桩

• 光晕（halo）：halo: true后围绕菱形显示一圈高亮描边，默认颜色与fill一致，haloLineWidth默认 3、haloStrokeOpacity默认 0.25，常用于高亮当前节点。
• 徽标（badges）：badges数组可配置多枚徽标，每项含text与placement（如right-top、right、right-bottom），背景色默认从色板badgePalette（#7E92B5、#F4664A、#FFBE3A）按顺序分配，也可在单项上用backgroundFill覆盖。
• 连接桩（ports）：ports数组按placement（left/right/top/bottom或[number, number]相对坐标）在菱形边缘放置连接点，portR控制半径；边会优先连接到最近的连接桩，适合做"输入/输出"端口建模。

综合示例：内置菱形节点的完整效果

下面完整复刻 Diamond.zh.md 中的官方示例：用 9 个菱形节点分别展示默认、光晕、徽标、连接桩以及五种状态（active、selected、highlight、inactive、disabled）的渲染效果。

import { Graph, iconfont } from '@antv/g6'; const style = document.createElement('style'); style.innerHTML = `@import url('${iconfont.css}');`; document.head.appendChild(style); const data = { nodes: [ { id: 'default' }, { id: 'halo' }, { id: 'badges' }, { id: 'ports' }, { id: 'active', states: ['active'], }, { id: 'selected', states: ['selected'], }, { id: 'highlight', states: ['highlight'], }, { id: 'inactive', states: ['inactive'], }, { id: 'disabled', states: ['disabled'], }, ], }; const graph = new Graph({ container: 'container', data, node: { type: 'diamond', style: { size: 40, labelText: (d) => d.id, iconFontFamily: 'iconfont', iconText: '\ue602', halo: (d) => (d.id === 'halo' ? true : false), badges: (d) => d.id === 'badges' ? [ { text: 'A', placement: 'right-top', }, { text: 'Important', placement: 'right', }, { text: 'Notice', placement: 'right-bottom', }, ] : [], badgeFontSize: 8, badgePadding: [1, 4], portR: 3, ports: (d) => d.id === 'ports' ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] : [], }, }, layout: { type: 'grid', }, }); graph.render();

这个示例集中体现了菱形节点的几个实战要点：

1. 函数式样式：labelText、halo、badges、ports均以(d) => ...的形式按节点数据动态计算，是"一份配置驱动多样式"的典型写法；
2. 状态驱动：states: ['active']等声明让节点以对应状态样式渲染，展示 G6 内置状态机制（详见下文）；
3. 复合装饰：同一菱形上可同时叠加图标（iconText: '\ue602'的 IconFont 图标）、徽标（badgeFontSize: 8、badgePadding: [1, 4]）与连接桩（portR: 3），互不冲突。

与之对应的自动化测试位于 packages/g6/tests/unit/elements/nodes/diamond.spec.ts，它通过createDemoGraph(elementNodeDiamond)渲染 packages/g6/tests/demos/element-node-diamond.ts 中的演示图并断言 SVG 快照一致——该 demo 与本示例同源（均为 grid 布局 + 40 大小 + iconfont 图标），你可以把它作为回归验证的最小可运行用例。

状态样式：让菱形节点响应交互

在实际交互（点击、悬停等）中，元素只是被标记了某种状态，需要为状态配置对应样式才能把"状态"转译为"视觉"。G6 内置了selected（选中）、highlight（高亮）、active（激活）、inactive（不活跃）、disabled（禁用）五种状态，也支持自定义状态。样式通过node.state配置，会覆盖默认样式：

const graph = new Graph({ node: { type: 'diamond', state: { focus: { lineWidth: 3, // 描边宽度 stroke: 'orange', // 描边颜色 }, }, }, });

数据结构为{ [state: string]: NodeStyle }，即每个状态名映射一份样式对象。在综合示例中，active、selected等节点正是通过数据里的states数组触发了对应的内置状态样式，配合halo光晕即可实现"决策节点被选中时高亮描边 + 光晕外扩"的经典反馈效果。

动画与色板：为菱形锦上添花

除样式外，菱形节点同样支持node.animation与node.palette两套通用配置。

动画可整体关闭（node.animation: false），也可按阶段配置enter/update/exit/show/hide/collapse/expand。例如让决策节点在位置更新时平滑移动：

{ "node": { "animation": { "update": [ { "fields": ["x", "y"], "duration": 1000, "easing": "linear" } ] } } }

也可直接使用内置动画："enter": "fade"、"update": "translate"、"exit": "fade"，或将某阶段设为false关闭。

色板可将颜色按规则映射到fill，让不同类别的菱形自动获得不同颜色：

{ "node": { "palette": { "type": "group", "field": "category", "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] } } }

type支持group（离散）与value（连续），field指定分组字段（默认取id），invert可反转色板；也可以直接传注册过的色板名，如"palette": "tableau"。当流程图中存在多类决策节点（如"审批判断""风险判断"）时，用category字段分组着色，是菱形节点最常见的视觉增强手段。

小结

菱形节点是 G6 表达"判断 / 决策"语义的标准载体，使用成本极低：只需将node.type设为diamond，即可获得完整的主图形、标签、图标、光晕、徽标、连接桩、状态、动画与色板能力。其实现继承自 Polygon 多边形体系（diamond.ts → polygon.ts），顶点由 getDiamondPoints 按size宽高计算得出，边线自动贴合菱形轮廓。若需自定义更特殊的菱形变体（如圆角菱形、长宽比动态变化），可参考 Polygon 体系在getPoints中自定义顶点坐标，或通过函数式样式按数据动态返回size。结合 BaseNode 通用配置 与本文示例，即可在流程图、决策树等场景中快速构建语义清晰的判断型节点。

【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6