问题标签 [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 投票
2 回答
10115 浏览

javascript - D3js 过滤器选择

我正在创建财富 500 强数据的交互式气泡图。我正在尝试减少选择,但无法弄清楚为什么它没有按我的预期工作。

JSON 数据如下所示:

我想删除父节点。我正在尝试使用此处描述的过滤器功能。

但是,如果我在初始化node选择的地方添加过滤器函数,则要么什么都没有发生,要么我得到一个错误。

(当我在附加文本之前应用它时过滤器起作用)

我该如何解决这个问题?

更新:这是一个 JSFIDDLE http://jsfiddle.net/B9w4N/8/显示我的问题。

在此处输入图像描述

0 投票
1 回答
1307 浏览

javascript - D3 - 访问嵌套数据以创建导航树

所以我一直在使用 d3 的缩放圈(http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html):

在此处输入图像描述

数据作为 json 数组传递给 d3 脚本,其中包含几个不同级别的数组和对象。

显示圆圈没有问题。我现在正在尝试在映射数据层次结构的一侧创建导航显示。理想情况下,我想要的是这样的:

这是一个基本的列表结构。我唯一能做的就是访问数据中的 1 级。我使用'divs' 来尝试首先降低结构。

我已经无法继续超过那个级别了。我在想递归方式可能是最好的方式。我在下面尝试了这个函数,但它只是将 div 附加到顶部 div 而不是父节点。

任何关于如何将孩子附加到他们的父母,或如何访问多个级别的数据的建议将不胜感激。

0 投票
1 回答
2692 浏览

javascript - 如何在 D3 圆包中使用 pack.sort() 函数?

我正在尝试理解 D3 并用它来制作文字云......这是为此目的使用 D3 circle pack 的代码:

气泡是按随机顺序出现的,但我希望它们按排序顺序排列,比如最左边最大的圆圈,然后在最右边的最小的圆圈右边更小......

怎么做?

0 投票
1 回答
1251 浏览

d3.js - D3中力图节点内的圆形包装?

我有一个用 D3 生成的力有向图,在每个节点(表示为大圆圈)内,我想使用 D3 的Circle Packing将它们打包成一堆较小的圆圈。是否可以在一个可视化中同时使用这两种布局?如何将布局插入节点?

0 投票
1 回答
7064 浏览

javascript - 如何为 D3 圆圈包布局中的每个圆圈着色

这是 d3js 中的包布局示例:

http://bl.ocks.org/4063530

是否可以控制单个圆圈的颜色?

这是带有颜色的包布局的另一个示例:

http://bl.ocks.org/4063269

在此处输入图像描述

你能帮我理解第二张图表中的气泡是如何分配颜色的吗?

0 投票
2 回答
2514 浏览

javascript - d3.js 包布局圆圈重叠

我对 d3.js 包布局有疑问。圆圈重叠,我不知道为什么......

我使用了这个例子中的代码:

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

在此处输入图像描述

这就是我的工作:

http://projekty.bron.it/d3-circles-all/

如您所见,重叠使图表无法使用。

0 投票
3 回答
6028 浏览

javascript - 在 d3.js 中更新 layout.pack

我正试图围绕 d3 的包布局(http://bl.ocks.org/4063530)。

我有基本的布局,但我想用新数据更新它。即收集新数据,将其绑定到当前 layout.pack 并相应更新(更新/退出/进入)。

我的尝试在这里(http://jsfiddle.net/emepyc/n4xk8/14/):

具体问题...

如何绑定数据?(因为数据不是复杂的结构,也不是数据数组)

如何将新节点/叶子添加到布局中?旧的被删除了?

指向一个工作示例的指针将不胜感激。

0 投票
2 回答
2658 浏览

javascript - 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

这个圆形包布局示例 ( http://bl.ocks.org/4063269 ) 非常适合我正在从事的一个项目,但是它会相对于彼此调整所有圆圈的大小:

在此处输入图像描述

有没有一种简单的方法来为每个圆指定固定半径?

我搜索了源代码、示例、google 和 stackoverflow,似乎找不到任何有用的东西。

圆圈的确切大小对我来说很重要。

0 投票
1 回答
1164 浏览

javascript - d3.js - 带有嵌套 g 节点的圆形包布局

我正在尝试实现圆形包装示例:http ://bl.ocks.org/4063530 - 但我希望它使用嵌套的“g”节点,以便更轻松地设置和控制每个圆形子级的可见性 - 但在在这个例子中,所有节点在 dom 中的深度相同。我如何嵌套它们?或者,如果不是嵌套,我如何只选择一个圆圈的直接子级(不是所有圆圈的所有子级)。我目前已修改示例以添加具有对象深度的类,如下所示:

现在想这样做:

有人有想法么?

0 投票
1 回答
361 浏览

javascript - 在 d3js 布局中使用 XML 作为数据源在 firefox 中不起作用

我正在尝试使用 XML 文件作为我的 d3js 可视化的数据源。它适用于基于 webkit 的浏览器,但不适用于 firefox。我相信错误来自一个 DOM 元素没有 forEach 函数的事实。3djs 似乎期望在它接收 DOM 对象的地方有一个数组。但我不知道在哪里

我的孩子功能看起来像这样。

是 XML 文档。我通过直接将它传递给 d3js

是代码的现场演示(在 webkit 中有效,但在 Firefox 中无效)。这是完整的源代码