@antv/infographic 0.1.3 → 0.2.0

package/src/designs/structures/chart-wordcloud.tsx

@@ -0,0 +1,278 @@
+import { ElementTypeEnum } from '../../constants';
+import type { ComponentType, JSXElement } from '../../jsx';
+import { getElementBounds, Group, Text } from '../../jsx';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+interface WordCandidate {
+  label: string;
+  value?: number;
+  color: string;
+  fontSize: number;
+  width: number;
+  height: number;
+}
+
+interface PlacedWord extends WordCandidate {
+  angle: number;
+  centerX: number;
+  centerY: number;
+  box: { x: number; y: number; width: number; height: number };
+}
+
+const DEFAULT_ROTATE_ANGLES = [0, 30, -30, 60, -60];
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+
+function getRotatedSize(width: number, height: number, angle: number) {
+  const rad = (Math.PI / 180) * angle;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return {
+    width: Math.abs(width * cos) + Math.abs(height * sin),
+    height: Math.abs(width * sin) + Math.abs(height * cos),
+  };
+}
+
+function hasCollision(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  placed: PlacedWord[],
+  padding: number,
+) {
+  const left = x - padding;
+  const right = x + width + padding;
+  const top = y - padding;
+  const bottom = y + height + padding;
+
+  return placed.some((word) => {
+    const wLeft = word.box.x - padding;
+    const wRight = word.box.x + word.box.width + padding;
+    const wTop = word.box.y - padding;
+    const wBottom = word.box.y + word.box.height + padding;
+    return !(
+      right <= wLeft ||
+      left >= wRight ||
+      bottom <= wTop ||
+      top >= wBottom
+    );
+  });
+}
+
+function placeWords(
+  words: WordCandidate[],
+  enableRotate: boolean,
+  padding: number,
+  spiralStep: number,
+  radiusStep: number,
+): PlacedWord[] {
+  const placed: PlacedWord[] = [];
+  const rotationAngles = enableRotate ? DEFAULT_ROTATE_ANGLES : [0];
+  const maxAttempts = Math.max(1600, words.length * 28);
+
+  words.forEach((word, wordIndex) => {
+    const sizeBias = Math.max(word.width, word.height);
+    const angleOffset = wordIndex * GOLDEN_ANGLE;
+    let extraRadius = 0;
+    let placedWord: PlacedWord | null = null;
+
+    for (let attempt = 0; attempt < maxAttempts && !placedWord; attempt++) {
+      if (attempt === Math.floor(maxAttempts * 0.6)) {
+        // Gradually expand the search radius for dense layouts
+        extraRadius = sizeBias;
+      }
+
+      const theta = angleOffset + attempt * spiralStep;
+      const radius =
+        radiusStep * Math.sqrt(attempt + 1) + extraRadius + sizeBias * 0.25;
+      const centerX = radius * Math.cos(theta);
+      const centerY = radius * Math.sin(theta);
+
+      for (const angle of rotationAngles) {
+        const rotated = getRotatedSize(word.width, word.height, angle);
+        const x = centerX - rotated.width / 2;
+        const y = centerY - rotated.height / 2;
+        if (
+          !hasCollision(x, y, rotated.width, rotated.height, placed, padding)
+        ) {
+          placedWord = {
+            ...word,
+            angle,
+            centerX,
+            centerY,
+            box: { x, y, width: rotated.width, height: rotated.height },
+          };
+          break;
+        }
+      }
+    }
+
+    if (!placedWord) {
+      const fallbackAngle = rotationAngles[wordIndex % rotationAngles.length];
+      const farRadius = radiusStep * Math.sqrt(maxAttempts + 1) + sizeBias;
+      const theta = angleOffset;
+      const centerX = farRadius * Math.cos(theta);
+      const centerY = farRadius * Math.sin(theta);
+      const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
+      placedWord = {
+        ...word,
+        angle: fallbackAngle,
+        centerX,
+        centerY,
+        box: {
+          x: centerX - rotated.width / 2,
+          y: centerY - rotated.height / 2,
+          width: rotated.width,
+          height: rotated.height,
+        },
+      };
+    }
+
+    placed.push(placedWord);
+  });
+
+  return placed;
+}
+
+export interface ChartWordCloudProps extends BaseStructureProps {
+  minFontSize?: number;
+  maxFontSize?: number;
+  enableRotate?: boolean;
+  padding?: number;
+  spiralStep?: number;
+  radiusStep?: number;
+}
+
+export const ChartWordCloud: ComponentType<ChartWordCloudProps> = (props) => {
+  const {
+    data,
+    options,
+    minFontSize = 16,
+    maxFontSize = 48,
+    enableRotate = true,
+    padding = 6,
+    spiralStep = 0.45,
+    radiusStep = 10,
+  } = props;
+  const { items = [] } = data;
+
+  const validItems = items
+    .map((datum, index) => ({ datum, index }))
+    .filter(({ datum }) => datum.label);
+
+  if (validItems.length === 0) {
+    return (
+      <FlexLayout
+        id="infographic-container"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Group>
+          <ItemsGroup />
+        </Group>
+      </FlexLayout>
+    );
+  }
+
+  const values = validItems
+    .map(({ datum }) => datum.value)
+    .filter((v): v is number => typeof v === 'number');
+  const hasValues = values.length > 0;
+  const minValue = hasValues ? Math.min(...values) : 0;
+  const maxValue = hasValues ? Math.max(...values) : 0;
+  const sameValue = hasValues && minValue === maxValue;
+  const uniformSize = (minFontSize + maxFontSize) / 2;
+
+  const mapFontSize = (value?: number) => {
+    if (!hasValues || sameValue) return uniformSize;
+    if (value == null) return minFontSize;
+    const ratio = (value - minValue) / (maxValue - minValue || 1);
+    return minFontSize + ratio * (maxFontSize - minFontSize);
+  };
+
+  const words: WordCandidate[] = validItems
+    .map(({ datum, index }) => {
+      const fontSize = mapFontSize(datum.value);
+      const measured = getElementBounds(
+        <Text fontSize={fontSize} fontWeight="bold">
+          {datum.label}
+        </Text>,
+      );
+      const color =
+        getPaletteColor(options, [index]) ||
+        getColorPrimary(options) ||
+        '#333333';
+      return {
+        label: datum.label as string,
+        value: datum.value,
+        color,
+        fontSize,
+        width: measured.width * 1.05,
+        height: measured.height,
+      };
+    })
+    .sort((a, b) => b.fontSize - a.fontSize);
+
+  const placedWords = placeWords(
+    words,
+    enableRotate,
+    padding,
+    spiralStep,
+    radiusStep,
+  );
+
+  const minX = Math.min(...placedWords.map((w) => w.box.x));
+  const minY = Math.min(...placedWords.map((w) => w.box.y));
+  const maxX = Math.max(...placedWords.map((w) => w.box.x + w.box.width));
+  const maxY = Math.max(...placedWords.map((w) => w.box.y + w.box.height));
+  const offsetX = -minX + padding;
+  const offsetY = -minY + padding;
+  const containerWidth = maxX - minX + padding * 2;
+  const containerHeight = maxY - minY + padding * 2;
+
+  const wordElements: JSXElement[] = placedWords.map((word, index) => {
+    const translateX = word.centerX - word.width / 2 + offsetX;
+    const translateY = word.centerY - word.height / 2 + offsetY;
+    const rotationOriginX = word.width / 2;
+    const rotationOriginY = word.height / 2;
+    const transform = `translate(${translateX}, ${translateY}) rotate(${word.angle}, ${rotationOriginX}, ${rotationOriginY})`;
+
+    return (
+      <Group transform={transform}>
+        <Text
+          width={word.width}
+          height={word.height}
+          fontSize={word.fontSize}
+          fontWeight="bold"
+          alignHorizontal="center"
+          alignVertical="middle"
+          fill={word.color}
+          data-indexes={index}
+          data-element-type={ElementTypeEnum.ItemLabel}
+        >
+          {word.label}
+        </Text>
+      </Group>
+    );
+  });
+
+  return (
+    <ItemsGroup
+      id="infographic-container"
+      width={containerWidth}
+      height={containerHeight}
+    >
+      {wordElements}
+    </ItemsGroup>
+  );
+};
+
+registerStructure('chart-wordcloud', {
+  component: ChartWordCloud,
+  composites: ['item'],
+});

package/src/designs/structures/hierarchy-tree.tsx

@@ -33,6 +33,8 @@ export interface HierarchyTreeProps extends BaseStructureProps {
   levelGap?: number;
   /** 节点间距：同级节点之间的水平距离，默认 60 */
   nodeGap?: number;
+  /** 布局方向：'top-bottom' 自上而下 | 'bottom-top' 自下而上 | 'left-right' 自左向右 | 'right-left' 自右向左，默认 'top-bottom' */
+  orientation?: 'top-bottom' | 'bottom-top' | 'left-right' | 'right-left';
 
   // ========== 连接线样式配置 ==========
   /** 连接线类型：'straight' 直线 | 'curved' 曲线，默认 'curved' */
@@ -73,6 +75,11 @@ export interface HierarchyTreeProps extends BaseStructureProps {
   colorMode?: HierarchyColorMode;
 }
 
+const distributedPadding = (rawPadding: number, size: number): number => {
+  const maxPadding = Math.max(0, size / 2 - 1);
+  return Math.min(rawPadding, maxPadding);
+};
+
 export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
   const {
     Title,
@@ -97,8 +104,14 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
     markerSize = 12,
     // 着色模式配置
     colorMode = 'branch',
+    // 布局方向
+    orientation = 'top-bottom',
     options,
   } = props;
+  const isHorizontal =
+    orientation === 'left-right' || orientation === 'right-left';
+  const mainSign =
+    orientation === 'bottom-top' || orientation === 'right-left' ? -1 : 1;
   const { title, desc } = data;
   const colorPrimary = getColorPrimary(options);
 
@@ -119,25 +132,64 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
     x2: number,
     y2: number,
     radius: number,
+    direction: 'vertical' | 'horizontal' = 'vertical',
   ): string => {
-    const midY = y1 + (y2 - y1) / 2;
+    const isVertical = direction === 'vertical';
+    const deltaMain = isVertical ? y2 - y1 : x2 - x1;
+    const deltaCross = isVertical ? x2 - x1 : y2 - y1;
+    const signMain = deltaMain === 0 ? 1 : Math.sign(deltaMain);
+    const signCross = deltaCross === 0 ? 1 : Math.sign(deltaCross);
+    const midMain = isVertical ? y1 + deltaMain / 2 : x1 + deltaMain / 2;
     const effectiveRadius = Math.min(
       radius,
-      Math.abs(y2 - y1) / 2,
-      Math.abs(x2 - x1) / 2,
+      Math.abs(deltaMain) / 2,
+      Math.abs(deltaCross) / 2,
     );
 
     if (effectiveRadius === 0) {
-      return `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+      return isVertical
+        ? `M ${x1} ${y1} L ${x1} ${midMain} L ${x2} ${midMain} L ${x2} ${y2}`
+        : `M ${x1} ${y1} L ${midMain} ${y1} L ${midMain} ${y2} L ${x2} ${y2}`;
+    }
+
+    if (isVertical) {
+      return `M ${x1} ${y1}
+              L ${x1} ${midMain - signMain * effectiveRadius}
+              Q ${x1} ${midMain} ${x1 + signCross * effectiveRadius} ${midMain}
+              L ${x2 - signCross * effectiveRadius} ${midMain}
+              Q ${x2} ${midMain} ${x2} ${midMain + signMain * effectiveRadius}
+              L ${x2} ${y2}`;
     }
 
     return `M ${x1} ${y1}
-            L ${x1} ${midY - effectiveRadius}
-            Q ${x1} ${midY} ${x1 + (x2 > x1 ? effectiveRadius : -effectiveRadius)} ${midY}
-            L ${x2 - (x2 > x1 ? effectiveRadius : -effectiveRadius)} ${midY}
-            Q ${x2} ${midY} ${x2} ${midY + effectiveRadius}
+            L ${midMain - signMain * effectiveRadius} ${y1}
+            Q ${midMain} ${y1} ${midMain} ${y1 + signCross * effectiveRadius}
+            L ${midMain} ${y2 - signCross * effectiveRadius}
+            Q ${midMain} ${y2} ${midMain + signMain * effectiveRadius} ${y2}
             L ${x2} ${y2}`;
   };
+  const getLayoutPoint = (node: any) => {
+    const { x, y } = node;
+    return isHorizontal ? { x: y * mainSign, y: x } : { x, y: y * mainSign };
+  };
+  const getNodeRect = (
+    node: any,
+    bounds: any,
+    offsets: { x: number; y: number },
+  ) => {
+    const { x, y } = getLayoutPoint(node);
+    const centerX = x + offsets.x;
+    const top = y + offsets.y;
+    const centerY = top + bounds.height / 2;
+    return {
+      centerX,
+      centerY,
+      left: centerX - bounds.width / 2,
+      right: centerX + bounds.width / 2,
+      top,
+      bottom: top + bounds.height,
+    };
+  };
 
   // 内置工具方法：构建层级数据
   const buildHierarchyData = (list: any[]): any => {
@@ -217,12 +269,13 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
     gradientDefs: JSXElement[],
     allNodes: any[],
   ) => {
-    const { x, y, depth, data: nodeData, parent } = node;
+    const { depth, data: nodeData, parent } = node;
     const indexes = nodeData._originalIndex;
     const NodeComponent = getItemComponent(Items, depth);
     const bounds = levelBounds.get(depth)!;
-    const nodeX = x + offsets.x - bounds.width / 2;
-    const nodeY = y + offsets.y;
+    const nodeRect = getNodeRect(node, bounds, offsets);
+    const nodeX = nodeRect.left;
+    const nodeY = nodeRect.top;
 
     const elements = {
       items: [] as JSXElement[],
@@ -277,6 +330,7 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
     // 父子连线
     if (parent) {
       const parentBounds = levelBounds.get(parent.depth)!;
+      const parentRect = getNodeRect(parent, parentBounds, offsets);
 
       // 计算父节点的子节点数量和当前节点在兄弟中的索引
       const siblings = allNodes.filter((n) => n.parent === parent);
@@ -285,34 +339,77 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
 
       // 计算连接线起点
       let parentX: number;
+      let parentY: number;
       if (edgeOrigin === 'distributed' && siblingCount > 1) {
         // 分布式起点：根据子节点数量分配起点位置
-        const startX =
-          parent.x + offsets.x - parentBounds.width / 2 + edgeOriginPadding;
-        const endX =
-          parent.x + offsets.x + parentBounds.width / 2 - edgeOriginPadding;
-        const segmentWidth = (endX - startX) / siblingCount;
-        parentX = startX + segmentWidth * siblingIndex + segmentWidth / 2;
+        if (isHorizontal) {
+          const padding = distributedPadding(
+            edgeOriginPadding,
+            parentBounds.height,
+          );
+          const startY = parentRect.top + padding;
+          const endY = parentRect.bottom - padding;
+          const segmentHeight = (endY - startY) / siblingCount;
+          parentY = startY + segmentHeight * siblingIndex + segmentHeight / 2;
+          parentX =
+            (mainSign > 0 ? parentRect.right : parentRect.left) +
+            edgeOffset * mainSign;
+        } else {
+          const padding = distributedPadding(
+            edgeOriginPadding,
+            parentBounds.width,
+          );
+          const startX = parentRect.left + padding;
+          const endX = parentRect.right - padding;
+          const segmentWidth = (endX - startX) / siblingCount;
+          parentX = startX + segmentWidth * siblingIndex + segmentWidth / 2;
+          parentY =
+            (mainSign > 0 ? parentRect.bottom : parentRect.top) +
+            edgeOffset * mainSign;
+        }
       } else {
         // 中心起点：所有线从节点中心出发
-        parentX = parent.x + offsets.x;
+        parentX = isHorizontal
+          ? (mainSign > 0 ? parentRect.right : parentRect.left) +
+            edgeOffset * mainSign
+          : parentRect.centerX;
+        parentY = isHorizontal
+          ? parentRect.centerY
+          : (mainSign > 0 ? parentRect.bottom : parentRect.top) +
+            edgeOffset * mainSign;
       }
 
-      const parentY = parent.y + offsets.y + parentBounds.height + edgeOffset;
-      const childX = x + offsets.x;
-      let childY = y + offsets.y - edgeOffset;
+      const baseChildX = isHorizontal
+        ? (mainSign > 0 ? nodeRect.left : nodeRect.right) -
+          edgeOffset * mainSign
+        : nodeRect.centerX;
+      const baseChildY = isHorizontal
+        ? nodeRect.centerY
+        : (mainSign > 0 ? nodeRect.top : nodeRect.bottom) -
+          edgeOffset * mainSign;
+      let childX = baseChildX;
+      let childY = baseChildY;
 
       // 调整终点位置（为箭头留出空间）
       if (edgeMarker === 'arrow') {
-        childY -= markerSize;
+        if (isHorizontal) {
+          childX -= markerSize * mainSign;
+        } else {
+          childY -= markerSize * mainSign;
+        }
       }
 
       // 生成路径
       let pathD: string;
       if (edgeType === 'curved') {
         // 使用贝塞尔曲线绘制曲线连接
-        const midY = parentY + (childY - parentY) / 2;
-        pathD = `M ${parentX} ${parentY} C ${parentX} ${midY}, ${childX} ${midY}, ${childX} ${childY}`;
+        if (isHorizontal) {
+          const midX = parentX + (childX - parentX) / 2;
+          pathD = `M ${parentX} ${parentY} C ${midX} ${parentY}, ${midX} ${childY}, ${childX} ${childY}`;
+        } else {
+          const midY = parentY + (childY - parentY) / 2;
+          pathD = `M ${parentX} ${parentY} C ${parentX} ${midY}, ${childX} ${midY}, ${childX} ${childY}`;
+        }
       } else if (edgeCornerRadius > 0) {
         // 使用圆角路径
         pathD = createRoundedPath(
@@ -321,11 +418,17 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
           childX,
           childY,
           edgeCornerRadius,
+          isHorizontal ? 'horizontal' : 'vertical',
         );
       } else {
         // 使用直角折线
-        const midY = parentY + (childY - parentY) / 2;
-        pathD = `M ${parentX} ${parentY} L ${parentX} ${midY} L ${childX} ${midY} L ${childX} ${childY}`;
+        if (isHorizontal) {
+          const midX = parentX + (childX - parentX) / 2;
+          pathD = `M ${parentX} ${parentY} L ${midX} ${parentY} L ${midX} ${childY} L ${childX} ${childY}`;
+        } else {
+          const midY = parentY + (childY - parentY) / 2;
+          pathD = `M ${parentX} ${parentY} L ${parentX} ${midY} L ${childX} ${midY} L ${childX} ${childY}`;
+        }
       }
 
       // 确定连接线颜色
@@ -389,17 +492,29 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
             : getColorPrimary(options);
 
         // 三角形箭头
-        const arrowPoints = [
-          { x: childX, y: y + offsets.y - edgeOffset },
-          {
-            x: childX - markerSize / 2,
-            y: y + offsets.y - edgeOffset - markerSize,
-          },
-          {
-            x: childX + markerSize / 2,
-            y: y + offsets.y - edgeOffset - markerSize,
-          },
-        ];
+        const arrowPoints = isHorizontal
+          ? [
+              { x: baseChildX, y: baseChildY },
+              {
+                x: baseChildX - markerSize * mainSign,
+                y: baseChildY - markerSize / 2,
+              },
+              {
+                x: baseChildX - markerSize * mainSign,
+                y: baseChildY + markerSize / 2,
+              },
+            ]
+          : [
+              { x: baseChildX, y: baseChildY },
+              {
+                x: baseChildX - markerSize / 2,
+                y: baseChildY - markerSize * mainSign,
+              },
+              {
+                x: baseChildX + markerSize / 2,
+                y: baseChildY - markerSize * mainSign,
+              },
+            ];
 
         elements.deco.push(
           <Polygon
@@ -429,13 +544,19 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
         // 父节点连接点
         elements.deco.push(
           <Ellipse
-            x={parentX - markerSize}
+            x={
+              (isHorizontal
+                ? mainSign > 0
+                  ? parentRect.right + edgeOffset
+                  : parentRect.left - edgeOffset
+                : parentX) - markerSize
+            }
             y={
-              parent.y +
-              offsets.y +
-              parentBounds.height +
-              edgeOffset -
-              markerSize
+              (isHorizontal
+                ? parentY
+                : mainSign > 0
+                  ? parentRect.bottom + edgeOffset
+                  : parentRect.top - edgeOffset) - markerSize
             }
             width={markerSize * 2}
             height={markerSize * 2}
@@ -450,8 +571,8 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
 
         elements.deco.push(
           <Ellipse
-            x={childX - markerSize}
-            y={y + offsets.y - edgeOffset - markerSize}
+            x={baseChildX - markerSize}
+            y={baseChildY - markerSize}
             width={markerSize * 2}
             height={markerSize * 2}
             fill={childDotColor}
@@ -484,22 +605,47 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
     nodesByParent.forEach((siblings) => {
       if (siblings.length <= 1) return;
 
-      const sorted = siblings.slice().sort((a, b) => a.x - b.x);
-      const siblingY = sorted[0].y + offsets.y - btnBounds.height - 5;
+      const sorted = siblings
+        .slice()
+        .sort((a, b) =>
+          isHorizontal
+            ? getLayoutPoint(a).y - getLayoutPoint(b).y
+            : getLayoutPoint(a).x - getLayoutPoint(b).x,
+        );
+      if (sorted.length === 0) return;
 
       for (let i = 0; i < sorted.length - 1; i++) {
-        const btnX =
-          (sorted[i].x + sorted[i + 1].x) / 2 + offsets.x - btnBounds.width / 2;
+        const current = getLayoutPoint(sorted[i]);
+        const next = getLayoutPoint(sorted[i + 1]);
         const parentIndexes = sorted[i].data._originalIndex.slice(0, -1);
         const insertIndex = sorted[i].data._originalIndex.at(-1)! + 1;
 
-        btns.push(
-          <BtnAdd
-            indexes={[...parentIndexes, insertIndex]}
-            x={btnX}
-            y={siblingY}
-          />,
-        );
+        if (isHorizontal) {
+          const btnX =
+            current.x +
+            offsets.x +
+            (mainSign > 0 ? -btnBounds.width - 5 : btnBounds.width + 5);
+          const btnY =
+            (current.y + next.y) / 2 + offsets.y - btnBounds.height / 2;
+          btns.push(
+            <BtnAdd
+              indexes={[...parentIndexes, insertIndex]}
+              x={btnX}
+              y={btnY}
+            />,
+          );
+        } else {
+          const siblingY = current.y + offsets.y - btnBounds.height - 5;
+          const btnX =
+            (current.x + next.x) / 2 + offsets.x - btnBounds.width / 2;
+          btns.push(
+            <BtnAdd
+              indexes={[...parentIndexes, insertIndex]}
+              x={btnX}
+              y={siblingY}
+            />,
+          );
+        }
       }
     });
 
@@ -541,13 +687,18 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
 
   const treeLayout = d3
     .tree<any>()
-    .nodeSize([maxWidth + nodeGap, maxHeight + levelGap])
+    .nodeSize(
+      isHorizontal
+        ? [maxHeight + nodeGap, maxWidth + levelGap]
+        : [maxWidth + nodeGap, maxHeight + levelGap],
+    )
     .separation(() => 1);
   const nodes = treeLayout(root).descendants();
 
   // 计算偏移量
-  const minX = Math.min(...nodes.map((d) => d.x));
-  const minY = Math.min(...nodes.map((d) => d.y));
+  const layoutPoints = nodes.map((d) => getLayoutPoint(d));
+  const minX = Math.min(...layoutPoints.map((d) => d.x));
+  const minY = Math.min(...layoutPoints.map((d) => d.y));
   const offsets = {
     x: Math.max(0, -minX + maxWidth / 2),
     y: Math.max(0, -minY + btnBounds.height + 10),
@@ -563,6 +714,8 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
   nodes.forEach((node, index) => {
     // 将扁平索引附加到节点数据上，用于 node-flat 模式
     node.data._flatIndex = index;
+    const { x, y } = getLayoutPoint(node);
+    (node as any).__layout = { x, y };
   });
 
   nodes.forEach((node) => {