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

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]两个维度取值范围 0100步长 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.tsexport interface DiamondStyleProps extends PolygonStyleProps {} export class Diamond extends Polygon { constructor(options: DisplayObjectConfigDiamondStyleProps) { super(options); } protected getPoints(attributes: RequiredDiamondStyleProps): Point[] { const [width, height] this.getSize(attributes); return getDiamondPoints(width, height); } }从中可以得出三点结论DiamondStyleProps 未新增任何独有属性——它直接继承PolygonStyleProps因此文档中菱形没有特有样式属性通用样式见 BaseNode的说明与源码完全吻合。顶点坐标由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° 的形状。渲染链路复用多边形体系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下上述每一部分都有独立的样式前缀。对菱形节点最常用的配置如下。主图形样式控制菱形的外观本体包括填充、描边、大小、阴影、透明度、虚线等。关键项属性描述类型默认值fill节点填充色string#1783FFstroke节点描边色string#000lineWidth节点描边宽度number1lineDash节点描边虚线样式number[]-size节点大小number | number[]32fillOpacity填充色透明度number | string1shadowColor / shadowBlur / shadowOffsetX / shadowOffsetY阴影效果--opacity节点透明度number | string1cursor鼠标移入样式stringdefaultpointerEvents事件拾取策略stringauto其中size支持三种写法number宽高相同、[number, number]宽度、高度、[number, number, number]宽度、高度、深度。由于菱形的长宽比由它决定决策节点想突出判断语义时可像在线体验示例那样设置为宽扁的[48, 24]。标签与图标样式标签前缀为labellabelText设置文字内容支持(datum) string函数式动态配置labelFill、labelFontSize、labelPlacement可选left/right/top/bottom/center及组合方位控制外观与位置labelBackground可叠加背景labelWordWrap与labelMaxWidth支持多行自动折行。图标前缀为icon有三种使用方式文字图标iconText: A配合iconFill、iconFontSize图片图标iconSrc指向图片地址优先级高于iconText配合iconWidth/iconHeightIconFont 图标先引入字体文件再设置iconFontFamily与iconText。在菱形节点中嵌入 IconFont 图标的写法下文综合示例将完整使用import { Graph, iconfont } from antv/g6; const style document.createElement(style); style.innerHTML import url(${iconfont.css});; document.head.appendChild(style);光晕、徽标与连接桩光晕halohalo: true后围绕菱形显示一圈高亮描边默认颜色与fill一致haloLineWidth默认 3、haloStrokeOpacity默认 0.25常用于高亮当前节点。徽标badgesbadges数组可配置多枚徽标每项含text与placement如right-top、right、right-bottom背景色默认从色板badgePalette#7E92B5、#F4664A、#FFBE3A按顺序分配也可在单项上用backgroundFill覆盖。连接桩portsports数组按placementleft/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();这个示例集中体现了菱形节点的几个实战要点函数式样式labelText、halo、badges、ports均以(d) ...的形式按节点数据动态计算是一份配置驱动多样式的典型写法状态驱动states: [active]等声明让节点以对应状态样式渲染展示 G6 内置状态机制详见下文复合装饰同一菱形上可同时叠加图标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指定分组字段默认取idinvert可反转色板也可以直接传注册过的色板名如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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考