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

javascript - d3.js 气泡图动画

我正在开发气泡图应用程序。不过目前 - 我的图表似乎坏了,不知道为什么。

当新数据集出现时,我将尝试为气泡设置动画。

http://jsfiddle.net/NYEaX/175/

0 投票
2 回答
1267 浏览

javascript - D3.js 打包圆布局 - 如何调整子半径

我目前正在使用 d3 的打包 cicle 布局(this)并注意到当父母只有一个孩子时,孩子的半径与父母相同。

是否可以使用布局提供的 .radius 方法来修改它?理想情况下,如果父母只有一个孩子,孩子的半径应该是父母的 1/2。

我找到了一个部分解决方案,即将占位符节点添加到树中,然后运行布局,然后再次删除它们。但这并不是我想要的,因为它使布局看起来偏向一边。

希望这是有道理的。看看小提琴,看看我的意思:jsfiddle

下面发布的示例应显示两个圆圈(如 img 中的圆圈 2)。

在此处输入图像描述

谢谢

0 投票
1 回答
408 浏览

javascript - Manipulate d3.js pack layout with HTML5 Range Input

I have this http://jsfiddle.net/thechrisjordan/p4Fwm/11/, where I'm manipulating a d3 pack layout with an HTML5 slider. Everything is working as I would like except for how the nodes are ordered when updateVis() is called.

This code is pretty straight forward: I'm creating the layout, and then the slider emits an event which causes the layout to update.

What I'm hoping to achieve is this same behavior but to have the child nodes remain in their same general areas in the pack as they change size. As you can see, they reposition themselves here.

It looks like my issue is line 69 where pack.nodes(data); is called. I've dug into d3 source but can't figure out how to prevent this reordering (and it may very well not be possible...).

I suppose an alternative would be to try and squeeze the pack layout into a force layout.

I'm brand new to d3 and am grateful for any insight here.

0 投票
1 回答
290 浏览

javascript - 如何允许 layout.pack() 大小在 d3 中自由形式?

我正在使用 d3.layout.pack(),其中我有一堆数据以不同大小的圆圈表示。这些圆圈的大小会发生变化,但是我如何使最外层的圆圈(所有节点都绑定在其中的圆圈)的大小也发生变化?我想显示总数的增加/减少变化。

0 投票
1 回答
1199 浏览

javascript - 如何在 d3 圆形包装图中创建链接(href)标签?

我正在处理这个例子: http: //mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

在此处输入图像描述

我对 d3 非常陌生,并且很难将标签(在最大放大级别)链接到外部站点。

0 投票
1 回答
740 浏览

html - 结合两个d3可视化

我在一个页面上结合了两个 d3 可视化,需要 CSS 帮助。在这一点上,他们出现在彼此之上,我很沮丧。这两个可视化是:http ://bl.ocks.org/mbostock/3883245 :

在此处输入图像描述

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

在此处输入图像描述

此时我刚刚合并了两个 index.html 文件。任何关于我应该如何设置样式以使它们不重叠的指针将不胜感激!

0 投票
1 回答
1607 浏览

javascript - 使用 d3.js 附加多个气泡云图

我正在使用这个气泡图来构建我自己的版本。http://bl.ocks.org/mbostock/4063269 在单个页面上附加图表的多个副本以进行比较似乎只附加图表的一个副本。它可能会在另一个上附加相同的图表。我的问题是这段代码中的什么导致只显示一个图表?在同一页面上使用相同代码(图表)的多个副本时,如何避免此问题?是否有指导方针或一些基本原则来防止这种情况?

0 投票
2 回答
2780 浏览

javascript - 我可以在 D3 气泡图中强制气泡大小比率吗?

根据特定标准,我创建了一个最多包含 4 个图表的网页。一切看起来都很棒。现在客户希望 4 个图表中的气泡大小比率保持一致(即,2000 的值在每个图表中用相同大小的气泡表示。)

是否可以配置bubble.nodes()生成器来执行此任务?

我知道我可以提供一个 radius() 计算器,但我没有数学背景来计算给定数据集的最佳半径。

我正在使用包布局。经过一夜好眠,我想我想出了一个可行的解决方案。在为每个图表生成布局后,我可以找到每个图表中最大气泡的半径与值的比率,scale()并对其他 SVG 应用转换以使比率相同(或足够接近)。

0 投票
1 回答
2885 浏览

javascript - 保持 D3 圆形包的纵横比 - 响应式设计

所以我正在处理 D3.js 中的气泡图:http: //bl.ocks.org/mbostock/4063269。宽度和高度由直径决定。所以我问:如何使这个 SVG 气泡云和任何其他 SVG 响应尽可能少的重新编码?

0 投票
0 回答
315 浏览

javascript - d3js中包布局中的随机形状而不是圆形

是否可以在 d3 包布局中将圆形的形状更改为一些随机形状

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

我需要将圆形的形状更改为多边形。