问题标签 [sunburst-diagram]

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 回答
3191 浏览

javascript - 带有 D3 的类文档暴晒图?

Docuburst可用于生成这样的图表:

在此处输入图像描述

看起来 Docuburst 是用 编写的Prefuse,而不是用 D3 编写的。

该图类似于众所周知的使用分区布局的 D3 图:(最大的区别是显示标签的方法)

在此处输入图像描述

是否有任何支持第一张图片中显示的圆形标签的 D3 分区布局(旭日形)示例?

如果您想要一些没有标签处理的示例,这里是jsfiddle,取自另一个 Q&A;还有一个jsfiddle,这个已经有标签了。


这是D3我正在研究的一个小测试示例:

jsfiddle

在此处输入图像描述

我设法使文本在圆形区域居中,但现在我需要找到正确的文本大小。

0 投票
3 回答
1624 浏览

javascript - D3.js 序列森伯斯特,点击更改数据

我正在尝试更改此处找到的序列 Sunburst 的数据:http: //bl.ocks.org/kerryrodden/7090426

我希望它在单击按钮时更改为新数据集(csv 或 json)。

我尝试阅读一个新的 csv,并调用createVisualization(json);

我还尝试createVisualization(json);使用更新的 json 直接调用。

在这两种方式中,我都会收到此错误:Uncaught TypeError: Cannot read property '__data__' of null 指的是这行代码:totalSize = path.node().__data__.value;

我还尝试在创建新的 svg 之前删除旧的 svg,但这并没有改变任何东西。

问题:如何更改该旭日形的底层数据(理想情况下从一个数据集动画到另一个数据集)?

我没有设法制作一个有效的小提琴,所以这是另一个线程的一个(所有代码都在上面的链接中):http: //jsfiddle.net/zbZ3S/(不同的数据 - 使用 json,但应该是与上面的链接相同的代码)

0 投票
1 回答
1443 浏览

javascript - D3 旭日形图:设置 arc.cornerRadius() 导致使用 arcTween 的路径无效

我尝试创建一个动态旭日图,它会缩放选定的弧线并隐藏其他弧线。只要我避免使用值大于 0 的 arc.cornerRadius(),这效果很好。

我在 (attrTween) arcTween 函数中记录了生成的弧,并且输出对我来说似乎是正确的,但是以下 svg 路径不同,其中第二个导致 d3.min.js:5 中的错误。

正确路径:

错误路径:

这就是我设置半径的方式:

我的第一个猜测是,cornerRadius 与隐藏弧冲突并且发生了无效的 svg,所以我尝试了各种尺寸。但是一切 > 0 都会导致错误,输出为:

这是我的 arcTween 函数(在github issue上与 mbostok 对应编辑):

请问有什么想法,接下来我可以检查什么?

ps sry,没有 jsfiddle,因为他们目前没有安装 d3 v3.5(我缺少数据导入)。我的代码与此处的示例类似:zoomable sunburst

这是 d3.js 库中发生错误的断点的屏幕截图,但我仍然不知道:

这是 d3.js 中发生错误的地方

0 投票
1 回答
1867 浏览

javascript - d3 sunburst 硬编码数据

我正在尝试使用标签实现可缩放的旭日形可视化(如图所示。因为我希望它在本地工作,所以我想跳过 json 文件的使用,而是想对数据内联进行硬编码。

有一个关于类似问题的相关问题(请在此处阅读),我试图遵循那里的建议,但它并没有解决我的问题。

下面是我修改后的代码。由于嵌入的 json 数据,很抱歉排长队。

非常感谢您的帮助。

代码:

0 投票
1 回答
607 浏览

d3.js - 将旭日形显示为半圆

是否可以创建形状为半圆形的旭日形?我能够给它我想要的形状,但是节点有问题。并非所有颜色都出现在新形状上,并且文本显示错误。

0 投票
0 回答
364 浏览

javascript - 如何设置旭日形的环数?

我正在尝试创建一个只有 2-3 个级别的旭日形首饰。我偶然发现了这个问题How to hide outer ring in zoomable sunburst,但在这个例子中(http://protembla.com/wheel.html)如果我隐藏“谁在处理任务”。然后我选择 Natasha 它不显示带有时间标签的弧线。

如何创建具有固定数量环但仍能够显示当有人单击弧时最初隐藏的数据的旭日形?

0 投票
0 回答
746 浏览

javascript - 更新 D3.js 可缩放 Sunburst 级别/子级

我正在尝试使用 d3.js 实现可缩放的朝阳,但想法是动态更新分区节点的级别/子节点。例如,在加载时,您只会看到根和子节点,但是当您单击该子节点时,我想缩放该子节点并添加该节点的子节点(根节点的孙子节点)。我试图适应不同的例子,但没有任何运气。现在,在 d3.json 函数上,我这样做是为了在一开始就限制孩子:

但不确定如何更新。

你可以在这里看到我的例子

谢谢您的帮助!

0 投票
0 回答
648 浏览

d3.js - D3旭日圆到半圆?(从 180 度开始)

基于这个“森伯斯特示例”: http ://bl.ocks.org/mbostock/4348373

如何让它始终是一个半圆,从 180 度开始,结束角度为 360 度?

0 投票
1 回答
1477 浏览

javascript - 捕获/保存 d3.js Sunburst Chart 的当前状态

我是 d3.js 的新手。我正在使用 d3.js 可缩放旭日形图 http://bl.ocks.org/mbostock/4348373。当用户放大到特定的弧线时,我需要捕捉旭日图的这种状态。当用户返回旭日形图或再次加载该图时,他应该会看到他离开时的状态。

注意:我不想序列化 svg 元素来显示旭日形首饰的状态。如果我将其序列化,则图表将是静态的,用户无法单击旭日形并遍历其他弧。

建议的解决方案:我想到的一个解决方案是在旭日形节点上模拟鼠标点击,直到最后一个节点用户查看。我无法为此设计算法。请指导我是否有任何其他解决方案..

0 投票
1 回答
1382 浏览

svg - 导出或下载 d3.js sunburst / 可折叠树形图为 pdf 文件

我需要将我的 d3.js 可折叠树形图和旭日形图下载为 PDF 文件。我尝试使用 jspdf.plugin.svgToPdf 插件,但它不起作用。有人可以指导我将图表下载为 pdf 吗?

我的可折叠树的源代码

})();