问题标签 [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 回答
1589 浏览

javascript - 加载 D3 圆包时的未定义函数

我正在从 d3js 构建气泡图,但TypeError: undefined is not a function使用该enter()方法继续接收。我几乎尝试了所有方法,除了过滤器方法返回 null 的事实之外,我无法确定为什么会产生此错误。目前不显示气泡图本身。

JsFiddle:http: //jsfiddle.net/26Tra/

0 投票
1 回答
678 浏览

javascript - D3js:绘制没有最外圈的包布局

我正在尝试在没有最外层变量的 d3.js 中绘制包布局。我想绘制一个没有最外层父圆的包布局。有什么办法吗?

0 投票
0 回答
73 浏览

javascript - d3 更新子圆数据可缩放包布局

在阅读了几个教程之后,我仍然对如何在 d3 中的 DOM 和数据之间导航有一些困难。对于以下示例,我只想将圆圈添加到选定的圆圈:

http://jsfiddle.net/stefanf/6Qm2z/13/'obj = {“名称”:“Q”,“大小”:1}

但不确定,我如何从 d3.select(".selected") 导航到它的数据......?

0 投票
1 回答
646 浏览

javascript - d3 从 GUI 更新数据(圆包布局)

据我所知 update(),enter(),exit() 用于从数据更新视图。是否还有另一种方法,从 GUI 更新数据?

例如,点击 B 圈,点击移除 -> 将从 GUI 中移除,但仍存在于数据中。点击刷新,它会再次出现:

http://jsfiddle.net/stefanf/6Qm2z/33/

ps 我现在可以通过首先使用 javascript 更新数据来做到这一点,但是我的问题是是否有合适的 d3-way..

0 投票
1 回答
482 浏览

javascript - d3 包布局中的访问比例因子

我正在使用 d3 的包布局和默认的半径函数。这会缩放圆圈的大小,以便所有内容都适合容器。

如何访问此比例因子?

0 投票
1 回答
12572 浏览

javascript - D3气泡图/包布局——如何让气泡从最大的气泡向外辐射到最小的气泡?


所以我使用与这个 D3 库示例相同的代码(使用我自己的数据):

http://bl.ocks.org/mbostock/4063269


我想得到一个气泡图,其中圆圈排列成最大的在中心,然后向外辐射到最小的。


这是我在 Photoshop 中创建的模型:

我真正想要的



这是我使用示例时得到的结果(默认排序的默认圆形包装算法):

默认包装



我尝试调整排序(包括尝试 d3.ascending 和 d3.descending)。我能想出的最好的方法基本上只是用常数(哈!)颠覆了排序,但仍然远非我想要的:

最好的我可以通过调整排序



好的,所以有没有机会在不必改变实际的 D3 包布局算法的情况下做到这一点?如果没有,也许有人已经扩展或修改了包布局,并可以告诉我我可以在 D3 源代码中更改的 5 行来破解它。



提前致谢!


编辑:

根据要求,这是我正在使用的代码。与上面的链接示例基本相同,只是在注释行中显示了一些表面变化:

还有我的 data.json 文件:

0 投票
1 回答
1227 浏览

svg - 点缀D3 SVG圆包图

我的D3 circle pack样子是这样的:(也可以通过jsfiddle 访问

在此处输入图像描述

但是,我希望图表看起来像这样:(不要注意标签或圆圈包装的位置,它们对我的情况不是必需的;我的意思是共同显示圆圈的“3d”外观及其颜色)

在此处输入图像描述

实现这一目标的好方法是什么?


在@Delapouite 回答之后,我整理了另一个jsfiddle

在此处输入图像描述

关键代码是:

0 投票
0 回答
2083 浏览

layout - 在 d3 中结合 force 和 pack 布局

我有一个用标准力布局表示的图表。

节点可以按属性进行聚类。

我可以用包布局表示这些集群吗?

两种布局将如何共存,我的节点的 x 和 y 坐标将如何计算?

编辑
我在想我可能必须处理我的数据以将节点集群转换为包含集群层次结构作为属性的单个节点。如果可能的话,我仍然欢迎一种不会强迫我重塑数据的替代方法。

这是一个示例数据集,我将其转换为适合多布局方法。这里的问题是我无法链接集群内的任何节点。

0 投票
2 回答
1252 浏览

javascript - D3 多个饼图标签

我对使用非常大的数据集并尝试创建非常大的饼图数组的 D3 比较陌生。但是我不知道如何在每个饼图的最顶部放置标题。

我正在使用的数据目前是这样的 csv 格式,而水果将是我想要的饼图标签

我在下面粘贴了我的代码,其中包含适用于它的数据。此外,我最终希望能够放大数据并从这样的缩小功能中查看它:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

在此处输入图像描述

如果有人有有效传达这一点的想法,将不胜感激。

0 投票
1 回答
537 浏览

javascript - d3.layout.pack 圆圈内的文本覆盖其他圆圈中的其他文本

我正在使用 d3.layout.pack 将圆圈放置在其他主圆圈内,例如http://mbostock.github.io/d3/talk/20111018/pack.html

在此处输入图像描述

但是我在圆圈内有较大的文本,它们会覆盖圆圈,并且可以覆盖近圆圈中的另一个文本:

在此处输入图像描述

我能想到的解决方案是:

  • 剪切文本以不覆盖圆圈
  • 为圆圈放置较小的字体。
  • 设置更大的填充
  • 将工具提示放在鼠标上
  • 旋转文字??

但这些想法并没有让我太满意。例如,在这种情况下,我希望将两个较小的球放置得更间隔一些。

可以d3.layout.pack做一些更有趣的避免循环覆盖吗?

我可以用d3.layout.force这个吗?有任何想法吗?