Problem with size of titles inside circle

[thiagosaud]

Describe the bug
I have two problems with the size of the title in the circle, which are:
When the text is large:

1. Part of the text is hidden inside the circle;
2. The text is not displayed in the circle;

Expected behavior
I need the circles to fit the text size so they don't get clipped or hidden.

Screenshots

Additional context
I'm using size according to the documentation to orchestrate the size of the circle, but it doesn't work.

Code

  CirclePack()
      .data(nodes)
      .label('name')
      .size('size')
      .color('color')
      .minCircleRadius(50)
      .tooltipContent((d, node) => tooltipoContent({ size: node.value }))(containerRef.current);

[vasturiano]

@thiagosaud thanks for reaching out.

It's not clear what your expectation would be for this case. The radius of the circles should not be adjusted to fit the label text, that would lead to distortion in the data. The radius of the circles is purely calculated from the size attribute in the nodes.

The only thing that can be done is to hide labels that would otherwise overflow out of their circle boundaries, which is what the component currently does. Do you have a different idea on how to handle that case?

[p4prawin]

for both of the issue temporary solution is to handle text visibility with css. below css worked for us...

text.path-label {
    opacity: 1 !important;
}

I think we can mitigate this case by just handling opacity between max 1 and min 0.5.
I am not sure but fix would be at line 241 in src/circlepack.js

.style('opacity', d => `${LABELS_WIDTH_OPACITY_SCALE((d.r * 2) * zoomTr.k / nameOf(d.data).length)}`)

to

.style('opacity', d => Math.max(0.5, `${LABELS_WIDTH_OPACITY_SCALE((d.r * 2) * zoomTr.k / nameOf(d.data).length)}`) )

PS: Its my wild guess by looking at code, I have not tested it.