Accessing original LabelComponent for Circle Packing

[due23]

I'm currently trying to display taxonomic tree data using the circle packing chart but am running into some trouble with the circle labels. Essentially I am wanting to alter the label component for the labels of the top 2 levels of the tree (nodes with height 2 and 1) so that the label is positioned/translated above the associated circle node. I have achieved this using the labelComponent attribute, however I only want to create a custom label component for the special case of nodes having height 2 and 1 and then use the originally generated label component for the other nodes.

const labelTitleComponent = (label: LabelProps<TreeNode>) => {
    if (label.node.data.name === "Eukaryota") {
      return (
        <text
          x={label.node.x}
          y={label.node.y - label.node.radius - 10}
          fill="white"
          textAnchor="middle"
        >
          Eukaryota
        </text>
      );
    } else {
      return (
        <text
          x={label.node.x}
          y={label.node.y - label.node.radius - 10}
          fill={setColors(label.node.data.name)}
          textAnchor="middle"
        >
          {label.node.data.name}
        </text>
      );
    }
  };

<CirclePacking
      {...commonProperties}
      // only want to return a custom label component for these specific cases
      labelComponent={(label) =>
        label.node.id === "Eukaryota" ||
        label.node.id === "Animalia" ||
        label.node.id === "Protista" ||
        label.node.id === "Fungi" ||
        label.node.id === "Plantae" ||
        label.node.id === "Chromista" ? (
          labelTitleComponent(label)
        ) : (
          <></> // want to return what the original LabelComponent would have been
        )
      }
/>

I am wondering if there is a way to access the originally generated label components so that I may use them and pass them to the labelComponent attribute in <CirclePacking/>. Or even if there is a way to access them and then change some of their styling such as translating their position or altering the fill colour?

I have provided my code in a sandbox to show what I have done and where I would like to access the original label components: https://codesandbox.io/p/sandbox/circle-packing-example-htfzw2?file=%2Fsrc%2FApp.tsx

[plouc]

Hi @due23,

Nice chart! I like the colors and the overall style 😄
The default component is currently not exported, but it would be possible to export LabelSvg and LabelHtml from the package index file.

[due23]

Thank you, also just wanted to say I've been loving nivo! It's so much easier to use than d3 for a react-based framework!

I have also updated the code sandbox above to using the format of LabelSvg from the package index file. It behaves mostly as expected aside from some of the label transitions when zooming in and out.

[plouc]

Unrelated, but if I were you, I would define colors, labelsFilter, labelComponent and onClick statically, or memoize them, it would be more performant.