问题标签 [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.
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,但应该是与上面的链接相同的代码)
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 - 将旭日形显示为半圆
是否可以创建形状为半圆形的旭日形?我能够给它我想要的形状,但是节点有问题。并非所有颜色都出现在新形状上,并且文本显示错误。
javascript - 如何设置旭日形的环数?
我正在尝试创建一个只有 2-3 个级别的旭日形首饰。我偶然发现了这个问题How to hide outer ring in zoomable sunburst,但在这个例子中(http://protembla.com/wheel.html)如果我隐藏“谁在处理任务”。然后我选择 Natasha 它不显示带有时间标签的弧线。
如何创建具有固定数量环但仍能够显示当有人单击弧时最初隐藏的数据的旭日形?
javascript - 更新 D3.js 可缩放 Sunburst 级别/子级
我正在尝试使用 d3.js 实现可缩放的朝阳,但想法是动态更新分区节点的级别/子节点。例如,在加载时,您只会看到根和子节点,但是当您单击该子节点时,我想缩放该子节点并添加该节点的子节点(根节点的孙子节点)。我试图适应不同的例子,但没有任何运气。现在,在 d3.json 函数上,我这样做是为了在一开始就限制孩子:
但不确定如何更新。
你可以在这里看到我的例子
谢谢您的帮助!
d3.js - D3旭日圆到半圆?(从 180 度开始)
基于这个“森伯斯特示例”: http ://bl.ocks.org/mbostock/4348373
如何让它始终是一个半圆,从 180 度开始,结束角度为 360 度?
javascript - 捕获/保存 d3.js Sunburst Chart 的当前状态
我是 d3.js 的新手。我正在使用 d3.js 可缩放旭日形图 http://bl.ocks.org/mbostock/4348373。当用户放大到特定的弧线时,我需要捕捉旭日图的这种状态。当用户返回旭日形图或再次加载该图时,他应该会看到他离开时的状态。
注意:我不想序列化 svg 元素来显示旭日形首饰的状态。如果我将其序列化,则图表将是静态的,用户无法单击旭日形并遍历其他弧。
建议的解决方案:我想到的一个解决方案是在旭日形节点上模拟鼠标点击,直到最后一个节点用户查看。我无法为此设计算法。请指导我是否有任何其他解决方案..
svg - 导出或下载 d3.js sunburst / 可折叠树形图为 pdf 文件
我需要将我的 d3.js 可折叠树形图和旭日形图下载为 PDF 文件。我尝试使用 jspdf.plugin.svgToPdf 插件,但它不起作用。有人可以指导我将图表下载为 pdf 吗?
我的可折叠树的源代码
})();