[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:force-layout-node-weight-and-line-elasticity":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 节点权重与连线弹性的力导向布局实验室\n\n## 这个示例构建了什么\n\n这个示例围绕一个根节点和一圈与之相连的子节点，构建了一个全屏的力导向布局实验场。图中使用黑色圆形节点、直线连线、右侧内置工具栏以及一个悬浮的白色控制窗口，因此整个画布看起来更像一个物理实验室，而不是业务图表。\n\n用户可以在节点和连线之间切换实验对象，随机化该对象使用的数值范围，重新调整正在运行的力求解器，并向选中的节点或根节点添加两个新的子节点。这个示例的重点不仅是让力导向布局运行起来，更在于通过节点大小、节点文字、连线标签和线宽，把元素级别的受力数值直接展示在画布上。\n\n## 数据是如何组织的\n\n初始数据集在 `initializeGraph()` 中以内联方式组装。它先创建一个根节点，然后追加 30 个子节点和 30 条从根节点连到子节点的连线，最后再调用 `setJsonData(...)`。\n\n数据挂载完成后，这个示例会立即对当前在线图数据做预处理，而不是为每次实验重新构建 JSON。在节点模式下，它会清除之前的覆盖值，为每个非根节点分配一个随机 `force_weight`，根据该数值缩放节点尺寸，把采样",true,500,1782615386786]