Connected text bubbles in D3.js?

Question

How would I create such a view in D3.js -- a central node with self-positioning outer bubbles, all containing text? I'm browsing their gallery but haven't found anything specifically like this. I understand it's good StackOverflow practice to show what one already tried, but I just don't know with which model I'm supposed to start; I played around with a Force Directed Tree with really big radii but it doesn't seem super appropriate.

PS: Icing on the cake would be to have the following connection descriptors as well, but I can also do without. Thanks!

I would go for force directed graph and fix the central node eg https://stackoverflow.com/questions/10392505/fix-node-position-in-d3-force-directed-layout. — Robin Mackenzie, May 08 '21 at 11:50
You need to drag and move those bubbles or just display them? — Michael Rovinsky, May 08 '21 at 12:21
@MichaelRovinsky Dragging is not needed (but wouldn't hurt either, and maybe feel fun). — Philipp Lenssen, May 08 '21 at 13:32

score 2 · Accepted Answer · answered May 10 '21 at 17:52

I agree with the suggestion to extend the force-directed graph demo. Here's a quick and dirty fork of that example: https://observablehq.com/@yousefamar/connected-text-bubbles

The text in each bubble is a foreignObject for flexibility, since I found it easier to put a p in the bubbles than svg text. This way you can also use overflow scrolling if there's too much text. pointer-events: none is so that the text can't be selected, and so that you can therefore drag the bubble through the text.

There is probably a lot you can improve there too, e.g. in order to create a gap in the lines, I put a white rect behind the text, but it's an arbitrary width. I remember however that there is some getComputedTextLength function to get the exact width of the label text, which is probably better.

Connected text bubbles in D3.js?

1 Answers1