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

javascript - 是否可以使用 d3.js 库将包布局(圆圈)与分区布局(旭日形)结合起来?

我正在尝试在使用 Sunburst 分区布局制作的分区中对圆圈进行分组,这些圆圈是 json 文件中可视化的槽包布局(气泡图)。到目前为止,我无法使其在各种尝试中发挥作用。但是,如果不可能,那么通过包布局可视化的对圆圈进行分组的最相似方式或任何方式是什么?

我也尝试用力布局对它们进行分组,但是当我使用碰撞功能时,圆圈会跳跃大约 30 秒。有什么建议,谢谢:)

这也是我想要的东西:(虽然它不是旭日形隔断)

在此处输入图像描述

0 投票
1 回答
2037 浏览

javascript - 如何在 d3.layout.pack 图中使根节点圆居中?

我将此处的 d3.layout.pack 图示例重构为可重用模块。但是,根节点不再位于中心 - 我找不到罪魁祸首。

这是该应用程序的 jsfiddle演示

你能检查一下有什么问题吗?

0 投票
1 回答
1590 浏览

javascript - 数据更新时如何更新可重用的 d3.js 图?

我将此处的 d3.layout.pack 图示例重构为可重用模块。现在我想在数据更新时更新图表。但是当我用新数据调用图表时,新图表会呈现在旧图表之上。您可以在此处找到该问题的演示。

基本上,为了模拟数据更新,我以这种方式调用带有 setinterval 的函数:

您可以在文件底部找到数据更新部分。你能检查一下有什么问题吗?

0 投票
1 回答
1535 浏览

javascript - 如何在 D3 可缩放包布局中隐藏标签的重叠文本?

我正在使用 D3 网站上提供的可缩放包布局:http: //mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

在此处输入图像描述

显示布局时会显示圆圈的所有标签。

问题是对于靠近在一起的小圆圈,标签重叠。我想知道是否有办法隐藏标签的重叠文本?

我已阅读有关“foreignobject”的信息,但如果这是答案,我不确定如何以及在何处将其合并到代码中。

0 投票
1 回答
1926 浏览

javascript - 实时 D3 气泡图(圆包)

我正在尝试在 d3.js 中创建实时气泡图图表本身很简单,因为显示的数据是非嵌套数组。只是大小不一的气泡。

通过 ajax 从 MVC 控制器获取初始数据的初始气泡图创建如下:

附加到初始气泡的创建是对

功能。这个函数应该负责从 MVC 控制器获取新数据,然后执行转换。转换完成后,该方法再次调用自身:

如果有人有关于如何执行更新的良好链接、示例或提示,我会很高兴。我想它一定是这样的

  • 获取新数据
  • 计算新模型
  • 在新获取的数据中添加/删除新的/不再存在的节点
  • 开始所有现有节点的转换

感谢您的任何提示!

0 投票
1 回答
112 浏览

javascript - 将退出转换添加到基于 D3 循环包的可重用模块

我有一个基于d3.layout.pack 图示例的可重用模块

我在节点元素上添加了退出时的转换,但似乎转换仅适用于一个数据集,而不适用于另一个数据集。

基本上,为了模拟数据更新,我用setInterval这种方式调用一个函数:

...我以这种方式添加了过渡:

您可以在文件底部找到数据更新部分,并在第 431 行找到退出转换处理。

你能检查一下有什么问题吗?

0 投票
0 回答
921 浏览

javascript - 如何在 d3.js 中的条形图上绘制气泡

我正在尝试在条形图上绘制气泡。每个柱上都会有一个气泡。气泡将由不同的 json 文件生成。你能给我任何建议吗?提前致谢。代码如下。

我想在条形图上显示气泡图。

0 投票
1 回答
2343 浏览

javascript - D3 圈子包布局中嵌套圈子的工具提示

我在这里敲我的头。我想在诸如Zoomable Pack Layout 之类的结构中显示叶节点的工具提示。叶节点是棕色的。如果我使用工具提示的标准代码:

我在主要圈子上得到工具提示,但在叶节点上没有。我试过:

...希望仅当存在叶节点包含的变量时才返回某些内容可能会阻止父节点显示工具提示,但我担心它所做的只是允许隐藏的工具提示默默地阻止任何内容显示。

有什么想法吗?我想我要么需要堆叠 svg:circles 以使叶节点位于其他节点的前面,要么仅将 svg:titles 附加到叶节点,但我不知道该怎么做。

这是工具提示的小提琴: 小提琴

0 投票
1 回答
624 浏览

javascript - Mysql to JSON to D3js no Visual...“类”识别错误

D3 新手...

我正在尝试复制一个简单的示例,但使用来自 mysql 的数据。由于我将列重命名为“名称”和“大小”,因此应该很容易过渡。我认为该行/项目!d.children;限制了要处理的数据或我的代码错误。

如何向现有的 .json 添加一个类

或者

我需要删除哪些代码才能使现有的 .json 工作?

json.php

此外,我认为脚本中存在错误root(假设是数据)。我将继续通过我的研究更新代码,直到有回复为止。

0 投票
3 回答
3629 浏览

javascript - 如何为具有一个分支和多个孩子的数据集显示不同颜色的 d3 气泡?

按照http://bl.ocks.org/mbostock/4063269上发布的示例开发 d3 气泡图:

在此处输入图像描述

我的数据集只有一个分支,但有很多子项(请参见下面的示例)。我所有的气泡都以相同的颜色显示。是否可以修改逻辑为同一分支中的每个孩子生成不同颜色的气泡?如果是这样,任何帮助将不胜感激。