Custom label on d3plus-react Treemap

Question

I have to customize the label of a d3plus-react series, the customization will be pretty close to the original one with the label and the percentage but instead of taking the name from the id as the original does I will take it from another field of the object (name).

The object has this structure:

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

and that's my Treemap config:

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

The problem is that I don't know how to modify the label of the tile without touching the shared percentage, I've searched through the docs but I haven't found nothing relevant.

Does anyone know if there are some official methods for doing this or I'll have to do it myself?

Desired result

Answer 1

I've found out that you have access also to the percentage, the code will be as following

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

Instead of the name I've used a custom property previously added to the data object so the series have the desired name