react-d3-graph节点分组求助：如何实现父子孙节点本地聚合

问题背景 #

我在用react-d3-graph库，想做出类似Marvel示例的展示效果。我的数据包含1个或多个父节点，每个父节点带子节点（子节点也可拥有子节点）。当前图表里所有节点过于分散且相互重叠，希望将每个父节点及其关联子节点进行本地分组。注意到示例页面中有“Unstick”按钮，点击后节点变得杂乱，和我当前图表状态一致，因此想了解如何实现节点“Stick”（粘连）分组效果？尝试过生成的config但无效，且文档中找不到相关说明，求解答。

当前配置（Config） #

const myConfig = {
    automaticRearrangeAfterDropNode: true,
    collapsible: true,
    directed: false,
    focusAnimationDuration: 0.75,
    focusZoom: 1,
    freezeAllDragEvents: false,
    height: 800,
    highlightDegree: 2,
    highlightOpacity: 0.2,
    linkHighlightBehavior: true,
    maxZoom: 12,
    minZoom: 0.05,
    nodeHighlightBehavior: true,
    panAndZoom: false,
    staticGraph: false,
    staticGraphWithDragAndDrop: false,
    width: 1000,
    d3: {
      alphaTarget: 0.05,
      gravity: -210,
      linkLength: 100,
      linkStrength: 10,
      disableLinkForce: false,
    },
    node: {
      color: "#d3d3d3",
      fontColor: "black",
      fontSize: 15,
      fontWeight: "normal",
      highlightColor: "red",
      highlightFontSize: 18,
      highlightFontWeight: "bold",
      highlightStrokeColor: "red",
      highlightStrokeWidth: 1.5,
      mouseCursor: "pointer",
      opacity: 0.9,
      renderLabel: true,
      size: 600,
      strokeColor: "none",
      strokeWidth: 1.5,
      svg: "",
      symbolType: "circle",
      labelProperty: "name",
    },
    link: {
      color: "lightgray",
      fontColor: "black",
      fontSize: 8,
      fontWeight: "normal",
      highlightColor: "red",
      highlightFontSize: 8,
      highlightFontWeight: "normal",
      labelProperty: "label",
      mouseCursor: "pointer",
      opacity: 1,
      renderLabel: false,
      semanticStrokeWidth: true,
      strokeWidth: 3,
      markerHeight: 6,
      markerWidth: 6,
      strokeDasharray: 0,
      strokeDashoffset: 0,
      strokeLinecap: "butt",
    },
  };

数据（Data） #

{
  "nodes": [
    {
      "id": 351843720888322,
      "name": "parent 3",   
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932740,
      "name": "child 5",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 387028092977152,
      "name": "sub child",
      "symbolType": "triangle",
      "color": "purple"
    },
    {
      "id": 369435906932741,
      "name": "child 6",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932742,
      "name": "child 7",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932743,
      "name": "child 8",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932744,
      "name": "child 9",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 351843720888321,
      "name": "parent 2",
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932737,
      "name": "child 2",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932738,
      "name": "child 3",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932739,
      "name": "child 4",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 351843720888320,
      "name": "parent 1",
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932736,
      "name": "child 1",
      "symbolType": "square",
      "color": "green"
    }
  ],
  "links": [
    {
      "source": 351843720888322,
      "target": 369435906932740
    },
    {
      "source": 369435906932740,
      "target": 387028092977152
    },
    {
      "source": 351843720888322,
      "target": 369435906932741
    },
    {
      "source": 351843720888322,
      "target": 369435906932742
    },
    {
      "source": 351843720888322,
      "target": 369435906932743
    },
    {
      "source": 351843720888322,
      "target": 369435906932744
    },
    {
      "source": 351843720888321,
      "target": 369435906932737
    },
    {
      "source": 351843720888321,
      "target": 369435906932738
    },
    {
      "source": 351843720888321,
      "target": 369435906932739
    },
    {
      "source": 351843720888320,
      "target": 369435906932736
    }
  ]
}

解决方案 #

你提到的“Stick”效果，本质是通过控制D3力导向布局的行为，让关联节点保持聚集状态，核心可通过以下三种方式实现：

1. 调整力导向参数增强分组聚集
   当前配置中d3.gravity为负数，会导致节点向外分散，改为正数可让节点向中心聚集；同时缩短linkLength让父子节点更贴近，调整linkStrength避免过度拉扯：

   d3: {
     alphaTarget: 0.05,
     gravity: 50, // 改为正数，驱动节点聚集
     linkLength: 60, // 缩短连接长度，增强父子节点关联性
     linkStrength: 0.8, // 合理设置连接强度，维持分组稳定性
     disableLinkForce: false,
   }
   

2. 启用静态布局固定分组
   示例中的“Stick”实际是开启静态布局模式：

   • 若不需要拖拽节点，直接设置staticGraph: true，节点会固定初始位置不再动态调整；
   • 若需要保留拖拽功能，设置staticGraphWithDragAndDrop: true，拖拽节点后不会触发自动重排，维持分组状态：

   staticGraph: false,
   staticGraphWithDragAndDrop: true,
   

3. 手动设置节点坐标（树形结构专属）
   若数据是明确的树形层级，可直接给每个节点添加x、y坐标，手动规划分组位置：

   {
     "id": 351843720888322,
     "name": "parent 3",   
     "symbolType": "circle",
     "color": "blue",
     "x": 200,
     "y": 400
   }
   

关键说明 #

react-d3-graph示例中的“Stick/Unstick”本质是切换静态布局状态，官方文档未明确标注该术语，但核心逻辑就是通过静态配置和力参数调整实现分组聚集。

内容的提问来源于stack exchange，提问作者jason