d3plus-react Treemap 上的自定义标签

Question

我必须自定义一个 d3plus-react 系列的标签，自定义将非常接近带有标签和百分比的原始标签，但我将采用原始名称而不是从 id 中获取名称它来自对象的另一个字段（名称）。

对象具有这样的结构：

id: string
name: string
value: number
parent: string

这是我的 Treemap 配置：

  const methods = {
    data: propsData,
    groupBy: ['parent', 'id'],
    size: 'value',
    tooltipConfig: {
      title: (d) => `${d.parent} - <span>${d.name}</span>`,
    },

    legend: true,
    shapeConfig: {
          label: (d) => {
            console.log(d);
            return [d.name];
          },
        },
  };

问题是我不知道如何在不触及共享百分比的情况下修改图块的标签，我搜索了文档但没有找到任何相关内容。

有谁知道是否有一些官方方法可以做到这一点，或者我必须自己做？

Desired result

Answer 1

我发现你也可以访问百分比，代码如下

const methods = {
data: propsData,
groupBy: ['parent', 'id'],
size: 'value',
tooltipConfig: {
  title: (d) => `${d.parent} - <span>${d.name}</span>`,
},

legend: true,
shapeConfig: {
      label: (d) => {
        return [d.customProperty, d.percentage];
      },
    },
}

我使用了之前添加到数据对象的自定义属性而不是名称，因此该系列具有所需的名称

d3plus-react Treemap 上的自定义标签

Custom label on d3plus-react Treemap

reactjs

d3plus