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

javascript - D3.js——加载和操作外部数据

我是 D3.js 的新手,正在玩各种教程/练习/等,但我对 D3 的基本需求是加载外部数据(通常是 JSON)并根据该数据绘制一些交互式图表。

基本的旭日形首饰示例在这里

在此处输入图像描述

我成功地将其调整为我自己的数据。但是,我希望简化数据的传递并处理 D3.js 中的一些操作。例如,我想提供一个平面数据文件,而不是准备好用于旭日形图的分层数组,该文件可以根据 D3 的需要进行操作。

但是,我不确定如何在 D3 的数据函数之一之外绘制旭日图。我尝试了下面的代码,而不是通过 json 加载数据,而是将其包含在内,因此结构是可见的(不出所料,它不起作用):

这是 HTML 的样子:

我确定我做错了很简单的事情,但是如果我没有将绘图函数嵌套在函数中,我很难让我的大脑了解 D3 将如何遍历所有数据并绘制图表像 d3.json。

有什么想法吗?

0 投票
3 回答
2505 浏览

javascript - Sunburst 数据可视化 - 附加环

我发现了这个用于数据可视化的好框架:http: //thejit.org/static/v20/Jit/Examples/Sunburst/example2.html

对于我的项目,我需要 4 个环。所以我试图弄清楚如何在模板 JS 中添加两个环,你可以在这里找到:http: //thejit.org/static/v20/Jit/Examples/Sunburst/example2.js

它基本上是一个级联结构,但简单地添加一个级别是行不通的。

有没有人知道我如何添加两个级别?

如果您有另一个类似或类似的框架,我会很感激您的反馈。

干杯,D

0 投票
2 回答
786 浏览

xslt - Freemind 到 JSON 到 Protovis xlst 转换草案

我在 freemind 中编辑了一个非常简单的分类法,并希望在 protovis 中将其可视化为旭日形可视化。分类的深度未知。

我已经尝试构建一个 XLST 转换,该转换可以通过 xsl 脚本功能与 Freemind 的导出一起使用 - 以 Protovis 生成旭日形所需的确切 JSON 格式输出数据 - 这个想法是在 javascript 中不需要进一步的转换。

我正在寻找的输出 JSON 格式的示例在这里: http: //mbostock.github.com/protovis/ex/sunburst.html

实际上,freemind .mm 文件格式是输入。

在 stylus studio 中运行我的 alpha 代码(如下所示)会构建一个 json 格式(格式错误但似乎合法),当我将 stylus studio 生成的输出直接手动保存到 .js 文件时,它会提供 protovis ok。出于某种原因,Freemind 似乎没有使用此代码导出数据......

有什么我想念的吗?任何帮助表示赞赏。

非常感谢,安德鲁

===========更新==============

我已经更正了代码,问题是freemind使用的xslt引擎不支持我的一些xsl。我更正了代码并在自由许可下将其移至 github 并从此处将其删除。

该适配器可在此处获得: https ://github.com/minkymorgan/Freemind2JSON#readme

  • 安德鲁
0 投票
1 回答
109 浏览

javascript - 是否有任何“Diskring”风格的图表框架?

是否有任何支持向下钻取“ Diskring ”样式图表的 javascript 图表脚本/框架?如下所示,当您单击某个部分时,图表应重新激活到下一个级别。

在此处输入图像描述

0 投票
1 回答
3647 浏览

javascript - 在 D3.js 中过渡旭日形

我正在使用 d3 进行数据驱动的可视化。我有一个类似于旭日形的结构(但只有一层,有点像中间有一个洞的饼图)。

通过单击键盘上的箭头,可视化的数据会发生变化,因此会出现旭日形。特别是 innerRadius 会根据数据的特定属性而变化,并且会添加、删除和更新一些元素。

我无法正确地从一个朝阳过渡到另一个朝阳。除了更新现有元素之外,过渡几乎可以。

例如,假设我在以下两条数据中有共同的元素来可视化,例如

在上面的示例中,我希望与元素 A 对应的弧线像 d3 网站上的 Sunburst 示例一样平滑更新,B 和 C 元素消失(我设法做到了)并且 D 元素平滑出现例如不断增长的弧线,或类似的东西。

我很努力,但我总是得到如下控制台日志:

我认为当数据在一个可视化和另一个可视化之间发生变化时会出现问题,但我不知道如何解决它。

0 投票
1 回答
1657 浏览

javascript - 过渡 svg.arc 的 innerRadius - D3.js

我有一个问题,与这个问题密切相关。

与示例相反,我还需要转换旭日形的 innerRadius,因此 d3.svg.arc() 的 innerRadius 属性。我知道对于“d”的转换必须以类似的方式完成(通过存储旧的 innerRadius 使用 attrTween),但我没能做到。

有什么建议吗?一个代码片段会很棒!

0 投票
1 回答
461 浏览

javascript - 将旭日形图放在馅饼上时,d3 中的部分缺失

(首先发布在谷歌组但没有回应,所以假设我应该在这里发布)。

我试图在馅饼(黄色和白色部分)上放置一个旭日形(彩色弧线)。

这是一个显示问题的 js fiddle,缺少初始的绿色段:

http://jsfiddle.net/qyCkB/1/

在此处输入图像描述

和一个没有正确显示所有段的饼图的 js fiddle:

http://jsfiddle.net/X3sRy/1/

在此处输入图像描述

在此行上创建节点变量后,我检查了它:

并且两个示例中的值似乎相同。

在检查 DOM 时,它只是没有绘制旭日形的前几段。

这应该可行还是不能将两种不同的布局放在一起?有没有更好的方法来实现同样的目标?

0 投票
1 回答
1422 浏览

javascript - 选择弧/元素

sunburst中,如何在生成所有弧之后让代码选择根弧?

例如,在代码中:

单击中间弧时,它将作为“d”传递给“函数”。

(它的数据首先在 json 文件中)

更新 1:像这样更改代码……</p>

…解决了问题,它返回object

但这个解决方案看起来不正确,也不通用。

更新 2:我尝试了几个选择,例如:

它通常返回array

或“未定义”

更新 3

array带孩子的 1 号退货:

__data__我要的对象在哪里,但我无法选择它。

0 投票
1 回答
597 浏览

d3.js - d3 旭日形不完全过渡

我在 sunburst-zoom 示例(d3 包中的 /examples/partition/partition-sunburst-zoom )之上构建,并注意到有时转换“就在”最后一点之前停止。
为了解决这个问题,arcTween 必须通过以下方式进行修改:

这切断了过渡开始的一小部分,但几乎可以肯定地以一致的状态结束。
即使使用原始的 partition-sunburst-zoom,我也遇到了这个问题,但没有我的数据和修改那么多。

有谁知道修复它的“整洁”方法?

0 投票
8 回答
36980 浏览

python - 如何在 R 或 Python 中制作旭日形图?

到目前为止,我一直无法找到可以创建像John Stasko那样的旭日形图的 R 库。任何人都知道如何在 R 或 Python 中实现这一点?

森伯斯特