时间戳

首页 > 解决方案 > d3plus-react Treemap 上的自定义标签

reactjs - d3plus-react Treemap 上的自定义标签

问题描述

我必须自定义 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];
          },
        },
  };

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

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

期望的结果

标签： reactjsd3plus

解决方案

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

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];
      },
    },
}

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

推荐阅读