search

vasturiano / circlepack-chart

A circle packing interactive chart web component for visualizing hierarchical data
https://vasturiano.github.io/circlepack-chart/example/flare
MIT License
63 stars 20 forks source link

Force z index on labels #2

Open AidanDaniel97 opened 4 years ago

AidanDaniel97 commented 4 years ago

When the chart is rendered the parent labels show underneath all the child circles - is there a way to have the label show on top?

vasturiano commented 4 years ago

@AidanDaniel97 I'm afraid that because of the way the SVG is structured (circle layers are stacked on top of each other, including their labels), it's not possible to pop one of the labels to the front. Since the graph is rendered in SVG, z-index css is also not a possibility.

But, you can manipulate the color opacity of the circles to allow some degree of see-through, so that the nested labels are still visible.

dz0l038 commented 3 years ago

Hi @vasturiano, first of all thanks for your nice job here!

I am facing the same issue, but instead of changing the stack order, another solution would be to display only labels at a certain level. Basically exactly like here: https://observablehq.com/@d3/zoomable-circle-packing.

Do you think it would be doable with your project?

vasturiano commented 3 years ago

@dz0l038 you can chose to set labels only on certain nodes. Just leave the label attribute out for those levels which you do not wish to have labels.