D3 可视化问题答案

【问题标题】：D3 Visualization QuestionsD3 可视化问题
【发布时间】：2013-06-18 17:32:50
【问题描述】：

我正在处理一个可视化并使用我在 stackoverflow 上找到的 jsfiddle。

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

我想可视化一些像这样的 json

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

我一直在这里研究 jsfiddle

如何确保文本和圆圈不相交？前一个小提琴确保了圆圈的这一点，但我想防止一个圆圈的标签与其他圆圈/其他标签相交。
如何更改圆圈的大小以相对于窗口中的开放空间量进行缩放？我想我会做一个 800 x 800 的窗口，如果有很多空白空间和几个圆圈，我希望圆圈变大，如果没有，我希望它们变小。

任何提示将不胜感激，谢谢！（我知道我可以自己解决这些问题，而且我做得很慢，但是一些我可以玩弄的如何做这些事情的例子会有所帮助！

【问题讨论】：

jsfiddle.net/JwQP6/3 这是一种按窗口大小缩放圆圈的方法。我正在使用 jquery 的 .height() 和 .width() 方法来查找文档的高度和宽度，然后将每个圆圈按较小者除以 100 进行缩放。
谢谢。这不是我所寻找的 100%，因为它们相交，但它很有帮助。然而，我意识到我可以删除圆圈，只可视化单词。你知道我将如何想象这些单词并改变它们的颜色和大小，就像我为圆圈做的那样？谢谢！或者另一种选择似乎是将文本放在圆圈的中心
你见过这个吗？ github.com/jasondavies/d3-cloud
我没有，但这看起来很有帮助，谢谢！我还没有决定是要使用圆圈还是单词，但我会看看
jsfiddle.net/AYvZP/6

【解决方案1】：

第一个问题的简短回答是，您不能使用 D3 自动执行此操作。您可以尝试通过手动检查标签和圆圈的位置来确保是这种情况，或者使用诸如 D3 的强制布局之类的东西来自动布置它们而不重叠。不过，这些选项中的任何一个都需要相当多的工作，而在第二种情况下，您无法保证不会有任何重叠。

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

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

【讨论】：

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