[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:custom-force-layout-color-clustering":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 自定义力布局实现基于颜色的节点聚类\n\n## 这个示例构建了什么\n\n这个示例构建了一个全屏的力布局实验场：大量圆形节点在深色画布上漂移，并逐渐重新聚合成基于颜色的簇。图一开始是一个没有边的节点场，节点带有随机位置以及随机的红、黄、蓝填充色，随后由一个自定义力求解器把同色节点彼此拉近。\n\n用户可以通过两个滑块调整运动参数，用一个按钮重新为所有节点着色，使用内置工具栏控制运行中的布局，并打开一个浮动设置面板来修改 canvas 模式和导出图片。这个示例的重点不是领域数据，而是集中演示如何用基于属性的吸引规则替换 relation-graph 默认力行为中的一部分。\n\n## 数据是如何组织的\n\n这个 demo 声明了一个较大的内联 `rawNodes` 数组，并将其包装进一个 `RGJsonData` 对象中，包含 `rootId: 'a'`、`nodes` 和一个空的 `lines` 数组。在任何内容插入图之前，每个节点都会被原地修改，填入随机 `x`、随机 `y`，以及从 `red`、`yellow`、`blue` 中随机选择的 `color`。\n\n这个预处理步骤很重要，因为图最初是以",true,500,1782615387033]