Antd Charts 1.4.2 Sankey图节点高度归一化及高度无法修改问题

一、解决图表高度无法修改的问题 #

• 优先给桑基图的父容器设置明确尺寸，autoFit属性依赖父容器的约束：

  .sankey-wrap {
    width: 100%;
    height: 400px; /* 替换为你需要的高度 */
  }
  

• 组件配置中开启autoFit，不要同时设置height属性（二者冲突会导致高度失效）：

  <Sankey
    data={yourDataset}
    autoFit={true}
    // 其他配置项...
  />
  

• 若父容器用flex布局，需确保父容器有明确的高度限制，避免桑基图无法自适应。

二、实现节点高度归一化（按自定义规则固定） #

Antd Charts桑基图基于G2Plot，可通过以下两种方式实现节点高度按自定义规则计算：

方法1：通过nodeStyle动态设置高度 #

假设你的节点数据中包含count字段表示流量数值，直接在样式回调中计算高度：

// 自定义高度计算规则：10px × 流量计数
const calcNodeHeight = (node) => node.count * 10;

<Sankey
  data={yourDataset}
  autoFit={true}
  nodeStyle={(node) => ({
    height: calcNodeHeight(node),
    fill: '#5B8FF9',
    stroke: '#fff'
  })}
  nodePadding={20} // 调整节点间距，避免重叠
/>

方法2：重写布局逻辑（更彻底） #

如果样式设置不生效，可通过自定义布局覆盖默认的节点高度计算逻辑：

import { Sankey } from '@ant-design/plots';

const customSankeyLayout = (sankeyInstance) => {
  const { nodes, links, defaultLayout } = sankeyInstance;
  // 遍历节点设置自定义高度
  nodes.forEach(node => {
    node.height = node.count * 10; // 按规则计算高度
  });
  // 调用默认布局完成后续排版
  return defaultLayout(nodes, links);
};

<Sankey
  data={yourDataset}
  autoFit={true}
  layout={customSankeyLayout}
  nodePadding={20}
/>

注意事项 #

• 确保节点数据中包含用于计算高度的字段（如count），若无则需先预处理数据补全。
• 调整nodePadding值，避免节点因高度变化出现重叠。
• 使用autoFit时，父容器高度需足够容纳所有节点总高度（节点高度之和 + 节点间距之和），防止内容截断。

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