Javascript D3可视化问题

我正在进行一个可视化，并使用在stackoverflow上找到的JSFIDLE

我以前没有做过D3，所以我有几个问题

我想将一些json可视化为这样

{word:"cat", count: 30},
{word:"dog", count: 15}....

我一直在做一个JSFIDLE

如何确保文本和圆不相交？上一个提琴确保了圆的这一点，但我想防止一个圆的标签与其他圆/其他标签相交

如何更改圆的大小以相对缩放窗口中的开放空间量？我想我会做一个800乘800的窗口，如果有很多空的空间和很少的圆圈，我希望圆圈变大，如果没有，我希望它们变小

任何提示都将不胜感激，谢谢！

---

（我知道我自己可以解决这个问题，而且我做得很慢，但是一些关于如何做这些事情的例子会很有帮助！

第一个问题的简短回答是，你不能用D3自动完成。你可以通过手动检查标签的位置来确保这一点或者使用类似D3的强制布局来自动布局而不重叠。但是，这两个选项中的任何一个都是相当大的工作量，在第二种情况下，您无法保证不会有任何重叠

关于第二个问题，您确定窗口的大小并相应地设置半径，例如

var radius = Math.sqrt(window.innerWidth * window.innerHeight) / 100;

---

谢谢，这两个答案都很有帮助，虽然不是我要求的100%。对于第一种情况，节点可以这样做，但标签不可以。如果可以，最好的做法是将标签放在节点内吗？对于第二种情况，这很酷，但我实际上在考虑确定半径，用基于圆的圆填充窗口对于其他圆的总半径，而不是基于窗口大小（如果有10个半径为5的圆，则每个圆都会比100个半径为10的圆大），在D3中没有什么可以自动避免重叠。对于第二个问题，您可以轻松地乘以因子（在我的示例中为100）在使用它进行除法之前，先按圈数。谢谢，第二个是个好主意。力和电荷不是用来防止重叠的吗？我只是添加了更多的文本，所以力不能正常工作，所以我试图找出如何使用半径函数的力（我在一些博客上看到了这一点，但还没有找到如何使用它）charge：（d）->Math.pow（d.radius，2.0）/8这是一种根据窗口大小缩放圆的方法。我使用jquery的

.height（）

和

.width（）

方法找到文档的高度和宽度，然后将每个圆按较小者除以100的比例缩放。谢谢。这不是我想要的100%，因为它们相交，但很有用。不过，我意识到我可以删除这些圆，只显示文字。你知道我将如何显示文字和c改变它们的颜色和大小，就像我为圆圈所做的一样？谢谢！或者另一种选择似乎是把文字放在圆圈的中心。你看到了吗？我没有看到，但这看起来很有帮助。谢谢！我还没有决定是否要使用圆圈或只是文字，但我会看一看