D3可视化问题

Question

我正在做一个可视化的工作，处理我在堆栈溢出上找到的一只小提琴。

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

我想想象一下像这样的json

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

我一直在做小提琴

http://jsfiddle.net/matthewpiatetsky/nCNyE/3/

1. 我如何确保文字和圆圈不相交？之前的小提琴确保了圆圈的这一点，但我想防止一个圆圈的标签与其他圆圈/其他标签交叉。
2. 如何将圆圈的大小更改为相对于窗口中开放空间的大小？我想我会做一个800×800的窗口，如果有很多空空间和很少的圆圈，我希望圆圈变大，如果没有，我希望它们变小。

任何提示都将不胜感激，谢谢！(我知道我自己能解决这个问题，而且我正在慢慢地做，但是一些我可以玩的例子将会很有帮助！

Answer 1

对第一个问题的简短回答是，您不能使用D3自动完成此任务。你可以通过手动检查标签和圆圈的位置来确保这种情况，或者使用D3的力布局来自动排列它们，没有重叠。但是，这些选项中的任何一个都是相当多的工作，在第二种情况下，您将无法保证没有任何东西会重叠。

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

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