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

javascript - 如何为 D3 序列 Sunburst 创建图例?

我正在修改原始的 D3 Sequence Sunburst 文件以更好地满足我的需要。原始colors变量是一个硬编码的对象。这显然不是最好的方法。我正在使用flare.json 示例,该示例更大,更难阅读,并且仍然比我在测试后将成为用户的json 文件小得多。

我想随机生成颜色,将它们应用于createvisualization函数中的每个数据,但我是 D3 的新手,不知道如何 1)从 json 文件中获取名称(除了叶子之外的所有内容),以及 2)将它们与随机颜色配对。

编辑:

添加随机颜色并应用它们原来是微不足道的,

但我仍然注意到如何获取 json 中所有非叶子的名称,然后从随机颜色和非叶子创建一个数组。

非常感谢这里的帮助。

0 投票
1 回答
5197 浏览

javascript - 错误:只有带有 D3js 的 HTTP 才支持跨源请求

我试图从此处提供的示例生成旭日图

我所做的只是将整个 JSON 复制到我的本地,然后复制 index.html

我没有对任何文件进行任何更改。

当我尝试运行 html 文件时,我收到了这些错误

在这里发现了一个类似的问题,但我不想从网络服务器加载它

任何人都可以帮我解决这个问题。

0 投票
0 回答
611 浏览

javascript - d3.js sunburst 或 bilevel 分区对孩子没有渐变

请查看我的示例www.rigel.ch/test

所以你好:) 我尝试使用路径的填充颜色.. 我在 createChart.js 文件中编写了一些代码来创建这些图表....并且我尝试改进第 115 行 Graph.prototype.fill 中的填充功能,我对 L*a*b 表示法有一些问题...

如何设置颜色范围?谁能解释我为什么父母对孩子的梯度不起作用?我正在考虑颜色的问题 si L*a*b 符号以及亮度...?这个问题的专家:(?

事实上,我想设置我的图表的第一个父颜色,并使孩子的渐变效果很好......

0 投票
2 回答
1059 浏览

javascript - 在我所有路径的中间添加一个圆圈(旭日形)

您好,我做了一个旭日形图或双层图,它位于饼图和甜甜圈图的中间^^ 当我附加所有路径时,它工作正常:

但问题是当我试图在我的所有路径的中间添加一个圆圈所以它不起作用时,这段代码在我所有路径的中间添加圆圈很好

但我需要在中间但在路径的外部边界上添加这个小圆圈。我不知道如何获得正确的 cx 和 cy 属性,请帮忙?

这是我的目标的截图(黑点是我所拥有的)和(红点是我想要做的)

http://i.stack.imgur.com/GXPYM.jpg

在此处输入图像描述

0 投票
1 回答
1137 浏览

javascript - d3.nest 具有可变的子深度

我有一个带有简单“类型”“计数”内容的 tsv 文件,如下所示:

level字符串可以是任何字符串,我只是在这里这样命名它们,以传达含义。类型的最后一个元素Foo,Bar等可以被认为是数据的叶子。

使用 d3,我想把它变成一个旭日形图。为此,我使用该d3.nest函数在斜线处分解类型。

这里的问题是,结果nestedData总是具有深度为 4 的条目/叶子。在示例数据中,您可以看到,叶子可以处于任何深度。

我如何构建嵌套数据,以便条目可以出现在任何深度,而不仅仅是在预定义的深度?

0 投票
1 回答
1498 浏览

javascript - 如何在可缩放的旭日形中隐藏外环

我想在 Sunburst 中隐藏外环,并且我想在用户向下钻取 sunburst 时显示它。这样我就可以清楚地显示外环中的数据....提前致谢

这是我的代码

0 投票
1 回答
363 浏览

javascript - 如何将背景圆圈添加到旭日形图?

如何在 d3 中向旭日形图添加背景圆圈?我正在使用标准的可缩放旭日形图示例:

在此处输入图像描述

我只想要一个指定颜色的完整圆圈,以突出显示特定显示器的“锯齿状”。

0 投票
1 回答
631 浏览

javascript - 如何删除可缩放旭日形上的虚假线?

如果你看一下可缩放的旭日形

在此处输入图像描述

...如果您更改<svg>元素的背景颜色,那么当您放大时,您会注意到笔触一直延伸到 SVG 元素的顶部,超出了旭日形的弧线。是一个示例 - 请注意从圆圈顶部向上延伸的额外线。

在此处输入图像描述

您在演示中看不到这一点,因为背景是白色的,笔触是白色的。但是我在笔触和背景颜色之间有更强烈的对比,所以这条虚假的线罐子。

0 投票
1 回答
3111 浏览

javascript - d3 - sunburst - 给定更新数据的过渡 - 尝试动画,而不是捕捉

我正在研究基于 Mike Bostock 的Zoomable Sunburst示例的 sunburst viz。

我希望能够使用全新的 JSON(具有相同的结构但不同的“大小”值)更改基础数据,并让 sunburst 动画过渡以反映更新的数据。

如果我使用 .data() 更改路径元素的数据,然后尝试按以下方式更新:

(..这与点击 fn 的代码几乎完全相同)

..我发现旭日形确实会正确地改变以反映新数据,但它会卡入到位而不是平滑过渡,就像放大时那样。

http://jsfiddle.net/jTV2y/ <-- 这是一个问题被隔离的 jsfiddle(转换发生在您单击“运行”后一秒钟)

我猜我需要创建一个不同的 arcTween() fn,但我对 d3 的理解还没有。非常感谢!

0 投票
0 回答
386 浏览

javascript - 独立排序多个分区(旭日形)图表的叶子

我正在尝试在页面上创建多个分区(旭日形)图表 - 每个项目存在的每个类别值的一个分区视图。不幸的是,我遇到了一个问题,这些层次结构的“叶”节点没有独立排序,似乎它们只根据使用的“最后一个”图表进行排序。

我正在定义布局:

然后在数组的每个项目上使用此布局,将每个项目绘制为旭日形。

请参阅此处的工作示例:http: //tributary.io/inlet/9598331 (您可以通过将鼠标悬停在叶节点上看到节点在每个图表上以相同的顺序存在。这不是预期的或正确的,在组层次结构。)

问题的视觉

我尝试了几件事,例如创建层次结构布局数组、更改布局.sort功能等,但未能在故障排除方面取得进展。我怀疑我在这里遗漏了一些非常简单的东西,但是我无法解决这个问题。任何帮助表示赞赏!