1

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.

enter image description here

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

3

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.