Recharts Treemap 工具提示标签

Question

使用 <Tooltip/> 创建 TreeMap 时，如何在工具提示中获取标签？

我只收到像 : 5738

这样的工具提示

在树形图中，名称显示正确。

当我从 codesandbox 中的 rechart 文档打开 example 并添加工具提示时，我有相同的行为。

我也尝试过自定义工具提示，但无法正常工作。

Answer 1

我必须制作自定义工具提示才能使其正常工作。

这会将单元格的名称（根名称）也放在工具提示中。

const CustomTooltip = ({ active, payload, label }) => {
  
  if (active && payload && payload.length) {
    return (
      <div className="treemap-custom-tooltip">
        <p>{`${payload[0].payload.root.name}`}</p>
        <p>{`${payload[0].payload.name} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};



<Treemap
        width={400}
        height={400}
        aspectRatio={4 / 3}
        data={formattedData}
        dataKey="size"
        stroke="#fff"
        fill="#8884d8"
      >
        <Tooltip content={<CustomTooltip />}/>
</Treemap>

Answer 2

<Treemap
    data={maxunit}
    backgroundColor="rgb(137,141,141)" 
    dataKey="fundUnit"
    nameKey="customerName"
    content={<CustomizedContent />}
>


const CustomizedContent = (props) => {
    const { depth, x, y, width, height, index, name } = props;

    return (
        <g>
            <rect
                x={x}
                y={y}
                width={width}
                height={height}
                style={{
                    fill:
                        depth < 2
                            ? DEFAULT_COLORS[index % DEFAULT_COLORS.length]
                            : 'none',
                    stroke: '#fff',
                    strokeWidth: 2 / (depth + 1e-10),
                    strokeOpacity: 1 / (depth + 1e-10),
                }}
            />
            {depth === 1 ? (
                <text
                    x={x + width / 2}
                    y={y + height / 2 + 7}
                    textAnchor="middle"
                    fill="#fff"
                    fontSize={14}
                >
                    {name}
                </text>
            ) : null}
            {depth === 1 ? (
                <text
                    x={x + 120}
                    y={y + 18}
                    fill="#fff"
                    fontSize={12}
                    fillOpacity={0.9}
                >
                    {labels[index]}
                </text>
            ) : null}
        </g>
    );
};

此代码适用于 tree-map inside text

Recharts Treemap 工具提示标签

Recharts Treemap Tooltip label

reactjs

recharts