问题标签 [circle-pack]

我正在尝试使用允许可变重叠/干扰的 D3 圆包布局，以便将圆限制在设定的半径内。现有的 D3 圆圈包布局当然会缩放外圈以包含内部项目，但我需要将外圈作为特定值。

本质上，我需要内圈允许重叠，但仅限于适合外圈。我已经尝试过负填充值，但它并不能很好地涵盖所有情况，并且会导致不必要的重叠。

有人有建议吗？

我对 D3 中的编码很陌生。我正在研究一个近乎实时的圆形包图，它从 ajax 调用中获取其基础数据，并根据数据值的变化调整节点的大小。我面临的挑战可能非常简单，但我还没有在网上找到一个足够相似的例子来作为解决方案。

当我运行这段代码时，我知道文本值实际上是随着数据的变化而正确传递的。但是，发生的情况是代码不断将文本标签附加到 svg "g" 节点（带有更新的值），而不是更改现有元素以反映更新的值。结果是在一个吸引人的气泡中间出现了分层的文本混乱。

我尝试使用d3.exit().remove()无济于事 - 我可能误用了它，并且它实际上是应用的适当技术。

有人愿意就我应该如何完成两件具体的事情提供一些指导：

1）我想重新使用现有的“文本”元素而不是删除+附加，除非它不实用。

2) 我想用新数据更新现有“文本”元素的值，而不刷新页面。

.js 文件的完整代码如下。我知道我可以使用“svg”而不是“svg:svg”等，但我还没有进入这个文件的整理阶段。

好的 ...

我正在使用来自以下 url ( http://bl.ocks.org/mbostock/7607535 ) 的这个例子：

我的问题是，当插入很多圈子时，主圈子没有正确填充，因为创建了一种提升，我的老板想要主要的圈子。

我留下代码和截图！

我做了气泡图。但是我没有为每个气泡获得不同的颜色。我怎么能那样做？我怎样才能为每个圆圈赋予不同的颜色？并且具有最高值的圆形数据应始终位于被其他气泡包围的中心。

片段：

我的数据是：

我需要为气泡/圆包图表创建一个图例。我正在显示圆圈内的值。我需要名字作为传说。例如，在下面提供的数据中，如果值为 60，我需要图例中的名称“Petrol”。我怎样才能实现它？

片段：

我的数据：

我将如何从 json 中获取值并创建图例？谢谢。

嘿，我正在使用 D3JS 作为图表库，我对利用气泡图中的酷特性非常感兴趣。在D3JS主图表站点上，使用以下气泡图比较两组数据：

气泡图。

我想知道是否有人真的知道如何创建这样的气泡图，我正在努力让它过去使用大小变量。

我只是真的希望能够比较两组数据，例如：

主机名 (45,955,158) VS 活动站点 (21,335,629)

我正在使用的代码如下，我使用 JSON 来检索我的数据，我是 js 的主要新手，甚至更多，所以这个 jQuery 库非常感谢任何帮助。

索引.html

移动.json

js/js.js // JavaScript 文档

虽然我已经多次看到这个问题，但我在实施时遇到了一些麻烦。我想做的是将label属性集中在每个圆圈内（如此处所述）。我相信我会将 text 属性添加到：

但是我很困惑为什么他们在我链接到的上一个示例中给出的说明不适用于我目前拥有的设置。我相信这pack是可能让我失望的选择（关于两者之间的区别），但任何进一步的例子都会有很大的帮助。谢谢！

更新

感谢您的回答/建议，我用我的进度更新了 Codepen（因为我需要两行数据；应该已经澄清），这似乎运行良好。现在这是包装成一个圆圈 - 在一天结束时，我希望它被包装成实际的#canvas宽度/高度（这是一个矩形）。我看到了这个树形图示例 - 这就是我想要的吗？

到目前为止我所拥有的演示

我正在尝试创建一个 D3.js压缩圆图。

当我将数据嵌入 HTML 文件时，它工作正常。当我将数据放入外部文件时，我什么也得不到（空白 DOM，没有控制台消息）。

如果您取消注释 var 数据声明并注释掉 d3.json （以及相应的右括号），它可以正常工作。

我可以在浏览器中看到“2013 Inf-2.json”文件，它看起来格式正确（它通过了 jsonlint 验证）。它包括从第一个“{”到/包括最后一个“}”的所有内容。就像嵌入式示例一样。

我在 OSX Mavericks 上通过 httpd (:80) 运行它，并尝试在 Chrome 或 Safari 中呈现图表。

我想知道是否可以稍微改变 d3.layout 中的打包算法。即，我想知道是否可以将其放在它的中间，而不是将具有最高值的子节点放在它与父节点接触的位置。现在看起来所有的孩子都是螺旋式的，最小的孩子在父母的深处。

我希望它不会太混乱。我很乐意澄清任何不清楚的地方。

我有一个非常类似于圆形包装的图表

在某些时候，用户想要查看一些不同的数据。显然，可以立即显示不同的图表，但是从感知和认知的角度来看，过渡会更好。注意：层次结构保持不变，没有新的或删除的节点，只有确定圆大小变化的基础值。

在结构相同但值不同的两个圆包图之间实现这种平滑过渡的好方法是什么？

（当然，在过渡期间，可以说持续 10 秒，不需要像原始图中那样保持圆之间的关系，圆可以相交并相互传递）

我知道treemaps有类似的解决方案。但是，它根本不能应用于圆形包装。树形图甚至有一个特殊的函数sticky() 可以在这种情况下提供帮助。

编辑：我正在附加新版本的jsfiddle。

一些功能现在开始工作。由随机数据驱动的转换很漂亮。

我现在有两个担忧：

1. 我不知道如何更新工具提示。这很重要，用户应该能够通过工具提示识别数据点。另一方面，好处是它们不需要在过渡期间进行插值，突变就足够了，但我不知道该怎么做。
2. 我真的不明白代码。编码主要是试错过程。如果有人验证代码是好的，或者可能不好，或者它可能不同，我将不胜感激。

编辑 2：我解决了问题，如果有人需要代码，请在答案中附加 jsfiddle。仍然欢迎大家对解决方案发表评论。

代码中最关键的部分似乎是：

提前感谢您的任何帮助或提示。