前言

这种需求，日常开发中应该比较常见吧“在一个图画布中点击节点时异步请求数据，同时保证原有画布不变， 做增量布局”。
explore.gif

实现

看到这种图相关的需求，我一般会考虑 G6 或者 D3，当然，极端情况下也会自己造轮子。最终选择的是 G6，也并不是因为我是 G6 开发者！

快速接入

由于 G6 没有对业务来说，成本稍高，而且没有现存案例，我们会对其进行简单封装（Ant Design Charts），后面会给出实现代码。
step1:依赖安装

  1. yarn add @ant-design/graphs -S

step2:组件引用 

  1. import React, { useRef } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RadialGraph } from '@ant-design/graphs';
  5. const DemoRadialGraph = () => {
  6.   const chartRef = useRef();
  7.   const data = {
  8.     nodes: [
  9.       {
  10.         id: '0',
  11.         label: '0',
  12.       },
  13.       {
  14.         id: '1',
  15.         label: '1',
  16.       },
  17.       {
  18.         id: '2',
  19.         label: '2',
  20.       },
  21.       {
  22.         id: '3',
  23.         label: '3',
  24.       },
  25.       {
  26.         id: '4',
  27.         label: '4',
  28.       },
  29.       {
  30.         id: '5',
  31.         label: '5',
  32.       },
  33.       {
  34.         id: '6',
  35.         label: '6',
  36.       },
  37.       {
  38.         id: '7',
  39.         label: '7',
  40.       },
  41.       {
  42.         id: '8',
  43.         label: '8',
  44.       },
  45.       {
  46.         id: '9',
  47.         label: '9',
  48.       },
  49.     ],
  50.     edges: [
  51.       {
  52.         source: '0',
  53.         target: '1',
  54.       },
  55.       {
  56.         source: '0',
  57.         target: '2',
  58.       },
  59.       {
  60.         source: '0',
  61.         target: '3',
  62.       },
  63.       {
  64.         source: '0',
  65.         target: '4',
  66.       },
  67.       {
  68.         source: '0',
  69.         target: '5',
  70.       },
  71.       {
  72.         source: '0',
  73.         target: '6',
  74.       },
  75.       {
  76.         source: '0',
  77.         target: '7',
  78.       },
  79.       {
  80.         source: '0',
  81.         target: '8',
  82.       },
  83.       {
  84.         source: '0',
  85.         target: '9',
  86.       },
  87.     ],
  88.   };
  90.   // 模拟请求
  91.   const fetchData = (node) => {
  92.     return new Promise((resolve, reject) => {
  93.       const data = new Array(Math.ceil(Math.random() * 10) + 2).fill('').map((_, i) => i + 1);
  94.       setTimeout(() => {
  95.         resolve({
  96.           nodes: [
  97.             {
  98.               ...node,
  99.             },
  100.           ].concat(
  101.             data.map((i) => {
  102.               return {
  103.                 id: `${node.id}-${i}`,
  104.                 label: `${node.label}-${i}`,
  105.               };
  106.             }),
  107.           ),
  108.           edges: data.map((i) => {
  109.             return {
  110.               source: node.id,
  111.               target: `${node.id}-${i}`,
  112.             };
  113.           }),
  114.         });
  115.       }, 1000);
  116.     });
  117.   };
  119.   const asyncData = async (node) => {
  120.     return await fetchData(node);
  121.   };
  123.   const config = {
  124.     data,
  125.     autoFit: false,
  126.     layout: {
  127.       unitRadius: 80,
  128.       /** 节点直径 */
  129.       nodeSize: 20,
  130.       /** 节点间距 */
  131.       nodeSpacing: 10,
  132.     },
  133.     nodeCfg: {
  134.       asyncData,
  135.       size: 20,
  136.       style: {
  137.         fill: '#6CE8DC',
  138.         stroke: '#6CE8DC',
  139.       },
  140.       labelCfg: {
  141.         style: {
  142.           fontSize: 5,
  143.           fill: '#000',
  144.         },
  145.       },
  146.     },
  147.     menuCfg: {
  148.       customContent: (e) => {
  149.         return (
  150.           <button
  151.             onClick={() => {
  152.               chartRef.current.emit('node:dblclick', e);
  153.             }}
  154.           >
  155.             手动拓展(双击节点也可以拓展)
  156.           </button>
  157.         );
  158.       },
  159.     },
  160.     edgeCfg: {
  161.       style: {
  162.         lineWidth: 1,
  163.       },
  164.       endArrow: {
  165.         d: 10,
  166.         size: 2,
  167.       },
  168.     },
  169.     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
  170.     onReady: (graph) => {
  171.       chartRef.current = graph;
  172.     },
  173.   };
  175.   return <RadialGraph {...config} />;
  176. };
  178. ReactDOM.render(<DemoRadialGraph />, document.getElementById('container'));

实现原理

事件绑定

双击节点时发起数据请求，也可手动 emit已经绑定的事件，布局结束后触发位置变更动画graph.positionsAnimate。

  1. /** bind events */
  2. export const bindDblClickEvent = (
  3.   graph: IGraph,
  4.   asyncData: (nodeCfg: NodeConfig) => GraphData,
  5.   layoutCfg?: RadialLayout,
  6.   fetchLoading?: FetchLoading,
  7. ) => {
  8.   const onDblClick = async (e: IG6GraphEvent) => {
  9.     const item = e.item as INode;
  10.     const itemModel = item.getModel();
  11.     createLoading(itemModel as NodeConfig, fetchLoading);
  12.     const newData = await asyncData(item.getModel() as NodeConfig);
  13.     closeLoading();
  14.     const nodes = graph.getNodes();
  15.     const edges = graph.getEdges();
  16.     const { x, y } = itemModel;
  17.     const centerNodeId = graph.get('centerNode');
  18.     const centerNode = centerNodeId ? graph.findById(centerNodeId) : nodes[0];
  19.     const { x: centerX, y: centerY } = centerNode.getModel();
  20.     // the max degree about foces(clicked) node in the original data
  21.     const pureNodes = newData.nodes.filter(
  22.       (item) => findIndex(nodes, (t: INode) => t.getModel().id === item.id) === -1,
  23.     );
  24.     const pureEdges = newData.edges.filter(
  25.       (item) =>
  26.         findIndex(edges, (t: IEdge) => {
  27.           const { source, target } = t.getModel();
  28.           return source === item.source && target === item.target;
  29.         }) === -1,
  30.     );
  32.     // for graph.changeData()
  33.     const allNodeModels: GraphData['nodes'] = [];
  34.     const allEdgeModels: GraphData['edges'] = [];
  35.     pureNodes.forEach((nodeModel) => {
  36.       // set the initial positions of the new nodes to the focus(clicked) node
  37.       nodeModel.x = itemModel.x;
  38.       nodeModel.y = itemModel.y;
  39.       graph.addItem('node', nodeModel);
  40.     });
  42.     // add new edges to graph
  43.     pureEdges.forEach((em, i) => {
  44.       graph.addItem('edge', em);
  45.     });
  47.     edges.forEach((e: IEdge) => {
  48.       allEdgeModels.push(e.getModel());
  49.     });
  50.     nodes.forEach((n: INode) => {
  51.       allNodeModels.push(n.getModel() as NodeConfig);
  52.     });
  53.     // 这里使用了引用类型
  54.     radialSectorLayout({
  55.       center: [centerX, centerY],
  56.       eventNodePosition: [x, y],
  57.       nodes: nodes.map((n) => n.getModel() as NodeConfig),
  58.       layoutNodes: pureNodes,
  59.       options: layoutCfg as any,
  60.     });
  61.     graph.positionsAnimate();
  62.     graph.data({
  63.       nodes: allNodeModels,
  64.       edges: allEdgeModels,
  65.     });
  66.   };
  67.   graph.on('node:dblclick', (e: IG6GraphEvent) => {
  68.     onDblClick(e);
  69.   });
  70. };

节点布局

对节点进行拓展时，根据拓展出的节点数量以及节点之间的距离(nodeSpacing) ，计算出下一层级存放当前拓展节点所需的弧，检测下一层级该区域内是否存在重叠节点，没有即符合要求，如果有重叠，拓展节点移动到下一层级，依次检测。当然，也可以选择在对应层级移动节点，或者固定层级节点数量，放不下的移动到下一层级，主要还是看业务需求。
image.png

代码:

  1. type INode = {
  2.   id: string;
  3.   x?: number;
  4.   y?: number;
  5.   layer?: number;
  6.   [key: string]: unknown;
  7. };
  9. export type IRadialSectorLayout = {
  10.   /** 布局中心 [x,y] */
  11.   center: [number, number];
  12.   /** 事件节点坐标 */
  13.   eventNodePosition: [number, number];
  14.   /** 画布当前节点信息，可通过 graph.getNodes().map(n => n.getModel()) 获取 */
  15.   nodes: INode[];
  16.   /** 布局节点，拓展时的新节点，会和当前画布节点做去重处理 */
  17.   layoutNodes: INode[];
  18.   options?: {
  19.     /** 圈层半径 */
  20.     unitRadius: number;
  21.     /** 节点直径 */
  22.     nodeSize: number;
  23.     /** 节点间距 */
  24.     nodeSpacing: number;
  25.   };
  26. };
  28. export const radialSectorLayout = (params: IRadialSectorLayout): INode[] => {
  29.   const { center, eventNodePosition, nodes: allNodes, layoutNodes, options = {} } = params;
  30.   const { unitRadius = 80, nodeSize = 20, nodeSpacing = 10 } = options as IRadialSectorLayout['options'];
  32.   if (!layoutNodes.length) layoutNodes;
  34.   // 过滤已经在画布上的节点，避免上层传入重复节点
  35.   const pureLayoutNodes = layoutNodes.filter((node) => {
  36.     return (
  37.       allNodes.findIndex((n) => {
  38.         const { id } = n;
  39.         return id === node.id;
  40.       }) !== -1
  41.     );
  42.   });
  43.   if (!pureLayoutNodes.length) return layoutNodes;
  45.   const getDistance = (point1: Partial<INode>, point2: Partial<INode>) => {
  46.     const dx = point1.x - point2.x;
  47.     const dy = point1.y - point2.y;
  48.     return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
  49.   };
  51.   // 节点裁剪
  52.   const [centerX, centerY] = center;
  53.   const [ex, ey] = eventNodePosition;
  54.   const diffX = ex - centerX;
  55.   const diffY = ey - centerY;
  56.   const allNodePositions: INode[] = [];
  57.   allNodes.forEach((n) => {
  58.     const { id, x, y } = n;
  59.     allNodePositions.push({
  60.       id,
  61.       x,
  62.       y,
  63.       layer: Math.round(getDistance({ x, y }, { x: centerX, y: centerY })) / unitRadius,
  64.     });
  65.   });
  67.   const currentRadius = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
  68.   const degree = Math.atan2(diffY, diffX);
  69.   let minRadius = currentRadius + unitRadius;
  71.   let pureNodePositions: Partial<INode>[] = [];
  72.   const getNodesPosition = (nodes: INode[], r: number) => {
  73.     const degreeStep = 2 * Math.asin((nodeSize + nodeSpacing) / 2 / r);
  74.     pureNodePositions = [];
  75.     const l = nodes.length - 1;
  76.     nodes.forEach((n, i) => {
  77.       n.x = centerX + r * Math.cos(degree + (-l / 2 + i) * degreeStep);
  78.       n.y = centerY + r * Math.sin(degree + (-l / 2 + i) * degreeStep);
  79.       pureNodePositions.push({ x: n.x as number, y: n.y as number });
  80.     });
  81.   };
  83.   const checkOverlap = (nodesPosition: INode[], pureNodesPosition: Partial<INode>[]) => {
  84.     let hasOverlap = false;
  85.     const checkLayer = Math.round(minRadius / unitRadius);
  86.     const loopNodes = nodesPosition.filter((n) => n.layer === checkLayer);
  87.     for (let i = 0; i < loopNodes.length; i++) {
  88.       const n = loopNodes[i];
  89.       // 因为是同心圆布局，最先相交的应该是收尾节点
  90.       if (
  91.         getDistance(pureNodesPosition[0], n) < nodeSize ||
  92.         getDistance(pureNodesPosition[pureNodesPosition.length - 1], n) < nodeSize
  93.       ) {
  94.         hasOverlap = true;
  95.         break;
  96.       }
  97.     }
  98.     return hasOverlap;
  99.   };
  100.   getNodesPosition(pureLayoutNodes, minRadius);
  101.   while (checkOverlap(allNodePositions, pureNodePositions)) {
  102.     minRadius += unitRadius;
  103.     getNodesPosition(pureLayoutNodes, minRadius);
  104.   }
  105.   return layoutNodes;
  106. };

问题

  1. 拓展节点过多，一圈存放不下怎么办？