D3.js中的连接文本气泡？

Question

如何在D3.js中创建这样的视图?D3.js是一个中心节点，带有自我定位的外部气泡，都包含文本。我正在浏览他们的图库，但没有找到任何像这样的东西。我知道展示已经尝试过的东西是很好的StackOverflow实践，但我只是不知道应该从哪个模型开始；我尝试了一个半径非常大的力定向树，但它似乎不太合适。

​

​

PS:锦上添花的是也有以下连接描述符，但我也可以没有。谢谢!

​

Answer 1

我同意扩展力有向图演示的建议。下面是该示例一个简单明了的分支：https://observablehq.com/@yousefamar/connected-text-bubbles

为了灵活起见，每个气泡中的文本都是一个foreignObject，因为我发现在气泡中放置一个p比在气泡中放置svg text更容易。通过这种方式，如果文本太多，也可以使用溢出滚动。pointer-events: none使得文本不能被选中，因此您可以在文本中拖动气泡。

你可能还有很多地方可以改进，例如，为了在线条上留出空隙，我在文本后面放了一个白色矩形，但它的宽度是任意的。不过，我记得有一些getComputedTextLength函数可以获得标签文本的确切宽度，这可能更好。