问题标签 [circle-pack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3275 浏览

javascript - 将元素添加到 D3 圆包节点

我正在尝试制作一个可缩放的圆形包装图。我希望每个子圈都包含一个较小的图表,该图表始终具有相同的结构(即 4 列,只有条形的高度会改变)。

到目前为止,我已经尝试在我的图表中添加一个简单rect的但矩形没有添加到圆圈中并且是静态的:

JS:

我还添加了一个 plunkr:http ://plnkr.co/edit/CfJqUQMISDzed2F71JpT?p=preview

如何仅在子圈子内添加此矩形?

非常感谢

0 投票
1 回答
1592 浏览

javascript - D3 - 无法从 csv 获取压缩的圈子

我无法让这个看似简单的代码工作。我有一个包含 5 行数据的 csv 文件,并试图从中创建一个气泡图!如果有人可以提供帮助,真的很感激!

这是csv文件:

0 投票
1 回答
613 浏览

javascript - 使用 layout.pack 将标签放置在不重叠的圆圈外

我对 d3 很陌生,我正在使用 d3.layout.pack 构建图表。

我想将每个圆圈的文本标签放在圆圈之外,但不与其他标签或其他圆圈重叠。

像这样: 使用 d3.layout.pack 的气泡图

有任何想法吗?

非常感谢

pd:这是我尝试过的:

0 投票
1 回答
3495 浏览

javascript - D3 - 循环包装多个数据

我对 D3 有点陌生,但在理解它方面仍然存在一些问题。

我正在使用本教程Zoomable Circle Packing

但是,我不知道如何加载多个数据集。

例如,我需要类似的东西(你可以在 jsfiddle 上看到),但是当按下按钮时,会加载一个不同的 .JSON 文件(两个文件中的名称相同,但值不同)。

解决方案可能是 mbostock 的“Thinking with Joins”,但我真的不知道如何使用它。

任何帮助,将不胜感激。

0 投票
1 回答
390 浏览

javascript - 从多个 json 文件更新 d3 包布局

我正在尝试使用来自不同 json 文件的数据更新我的扁平圆形包布局。我改编了本教程中的代码以使用我的代码:Updating the data of a pack layout from JSON call and redrawing

当您“检查元素”时,它显示数据正在更新,但节点仍与第一个 JSON 文件相关。我感觉这与我的 d3.json 回调“currentUrl”而不是“currentJson”有关。任何帮助,将不胜感激!!

这是我的 generatenewdata 代码:

0 投票
0 回答
349 浏览

javascript - 用于动画瓷砖的 javascript 或 css 库

我有一系列图片,我想在网页上显示这些图片,以模拟这些图片在空间中漂浮的效果。这些图片中的每一张都会轮流弹出更大的尺寸。是否有任何 javascript 或 css 库可以帮助完成这项工作?

我想实现的一个例子是http://bl.ocks.org/mbostock/4063269

在此处输入图像描述

...除了像这张图片中那样绘制数据之外,我会显示图片,甚至可能是动画。

0 投票
1 回答
1063 浏览

javascript - 圆形包的原始半径函数是什么?

我有兴趣调整圆形包布局上的圆形半径。为此,我需要知道原始半径是如何计算的。

通过阅读包布局的 d3.js 源代码,似乎默认的半径函数仅 适用Math.sqrtvalue每个节点。但事实并非如此,因为我修改了 D3.js 原始圆包示例, 添加了 a.radius(function(d){return Math.sqrt(d);}) 并且您可以在bl.ocks.org/ecerulm/f0a36710e3看到圆的半径不一样。

0 投票
1 回答
2051 浏览

javascript - d3.layout.pack 在升序时堆叠圆圈

我有一个数据集,当按升序排序时,圆圈最终会“堆叠”,但在使用 null 或降序排序时会出现正确分布。

上升

下降

无效的

完整的例子在这里:http: //jsfiddle.net/SXLHx/3/

有人有建议吗?

一些附加信息:

我发现如果我删除了至少两个值为 0 的块条目(不管是哪两个,但它必须是两个),布局就很好。http://jsfiddle.net/SXLHx/4/

此外,应用过滤器以不附加值为 0 的圆圈,如下所示:

不纠正布局问题。也许我过滤不正确?

0 投票
2 回答
4432 浏览

javascript - 如何将文本宽度与 D3 圆圈包中的圆圈大小匹配

使用 D3,我显示了一堆不同大小的圆圈,每个圆圈都填充了文本。我一直在寻找正确的字体大小,以便文本适合圆圈,具体取决于它的大小和文本的长度。长文本可能应该分成更多行。这是我的代码:

我也在http://jsfiddle.net/L4nMx/上创建了一个小提琴, 我想我应该计算文本的宽度并修改字体大小,直到它与圆圈的大小或类似的东西相匹配。或者是否有任何“伸展”功能可以简单地做到这一点?

0 投票
1 回答
4371 浏览

javascript - 如何在 d3.js 中更新气泡图?

我设法创建了一个气泡图,当它是单个数据集时效果很好。但是如果我需要用其他数据集更新它,就会出现问题。请帮助我在http://jsfiddle.net/9jL64/上使用我的更新功能。