如何自定义d3plus-react Treemap标签，保留百分比且使用name字段替代id

d3plus-react 原生支持该需求，无需自行实现完整标签逻辑，修改方法如下：

核心修改说明 #

你之前在shapeConfig.label中自定义返回值的写法，直接覆盖了组件默认的标签拼接逻辑，所以丢失了自带的百分比展示。正确的做法是使用组件顶层的label配置项指定标签取值字段，原生的百分比计算、展示逻辑会完全保留，仅替换标签文本来源：

1. 移除shapeConfig中的label自定义逻辑
2. 在顶层methods配置中新增label: "name"，指定从name字段读取标签文本

修改后完整配置代码 #

const methods = {
  data: propsData,
  groupBy: ['parent', 'id'],
  size: 'value',
  // 新增此行，指定标签从name字段取值
  label: 'name',
  tooltipConfig: {
    title: (d) => `${d.parent} - <span>${d.name}</span>`,
  },
  legend: true
};

进阶自定义（可选） #

如果需要进一步调整标签格式（比如修改百分比小数位数、追加额外文本），可以配合labelConfig.formatter实现：

const methods = {
  // ...其他配置保持不变
  label: d => d.name,
  labelConfig: {
    // 自定义标签格式化逻辑，text为上面label返回的名称，d为当前数据项，包含percent等计算属性
    formatter: (text, d) => `${text}\n${(d.percent * 100).toFixed(1)}%`
  }
};

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