D3: Zoomable Circle Packing with icon


I am utilising this example in an application. Is there a way to add an icon to a bubble? Ideally, the icon is placed in the center of the bubble slightly above the text. The icon is another SVG.

My approach was to add another selection for the icon and apply the transform attribute similar like it done for the label. But I wasn’t really able to put the icon at the correct position in the bubble. The icon should behave correctly when the user starts zooming.

Here is a mock:

Seeing your code example would help.

@LorenzHW I recommend to add <g> elements so that you can translate both your circles and text together. The notebook that you referenced might not be the ideal starting point. The following one will likely be a better basis:

As mentioned by @hellonearthis it would help to see your actual notebook, so that we can offer specific advice or even send suggestions. You can publish your notebook as “unlisted”, so that it won’t appear in any lists and you can publish it “properly” at a later time (or just unpublish again).