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

javascript - 放大时更新分区视图(冰柱或旭日形)

我正在使用这些视图来监视不断更新的事物,并且我每分钟左右发出一次获取请求以更新视图。目前,如果有人在获取新数据时被放大,他们会被缩小到第一级。我想知道是否可以在更新时保持视图放大,并且如果更新删除了视图所关注的节点,比如在这种情况下缩小一个级别。这是我的代码块。不用担心字体大小调整。

http://bl.ocks.org/JoshFerge/4ea29d16162d983e444b

0 投票
0 回答
390 浏览

highcharts - 使用 Highcharts 库创建 ICICLE 图表

我想使用 Highcharts 库开发 d3 库提供的 ICICLE 图表。在我搜索的范围内,我找不到任何使用 Highcharts 的 ICICLE 图表类型的可视化示例。

如果这真的可能,请帮助我如何创建它。

谢谢。

0 投票
1 回答
322 浏览

highcharts - 我需要使用 HighCharts 开发冰柱图

嗨,我可以调整树图并做到吗?我可以传递所有数据层次结构。它已经在 d3 中实现。我可以使用/调整 highcharts 的任何属性来渲染冰柱吗?

0 投票
1 回答
617 浏览

javascript - d3.js v4 分区,其中父项的值大于其子项的总和(node.sum)

我知道,在 d3.js v4 中,通过使用 d3.v4 hierarchy().sum(),父级的值可能大于其子级的总和

我也知道 hierarchy().sum() 函数将返回一个值,该值是节点及其子节点的总和。

但是,我只想绘制仅包含其值的相应矩形(而不是其值的总和加上其子项的总和)

可能吗?

例如,这是 JSON 文件:

{"name":"Top Level", "size": "50000" ,"children":[{"name":"Level 2: A","size":"10000","children":[{"name":"Son of A","size":"2000"},{"name":"Daughter of A","size":"3000"}]},{"name":"Level 2: B","size":"1000"}]}

所以对于顶级,我只有一个大小为 50000 的盒子。(不是 50000+10000+2000+3000+1000 = 66000)

0 投票
0 回答
22 浏览

d3.js - D3冰柱图静态节点高度

我正在创建一个水平 D3 冰柱图表,用于显示谱系。这只会显示父亲/母亲,因此每个节点将只有两个孩子(它的父母),这将一直持续到该特定行的末尾。

我遇到的问题是某些行比其他行长,这会为其父节点累积更大的值。然后,该值使该特定节点的高度大于另一个,因为这就是冰柱图的工作方式。

虽然没有设置谱系,但这个 Observable 显示了一个可缩放的冰柱图表示例:https ://observablehq.com/@john-guerra/zoomable-variable-size-icicle

上例中的“vis”总是大于“util”,因为基于其子项(及其值),它具有更大的值。我想做的是将每个子节点的高度设置为相等。

为了进一步简化这一点,这意味着每个子节点将是其父节点高度的 50%。

我不想设置静态/硬编码的高度值,因为我希望它保持响应,并且会因为显示更多代而变得混乱。

所有的孩子都必须有一个价值,所以我不能将任何东西设置为零并且具有递归谱系,我不确定如何使所有线条都具有价值。

感谢任何建议或指出正确的方向。

0 投票
1 回答
38 浏览

javascript - D3中的垂直冰柱

我需要将此冰柱旋转为垂直(上下)方式:https ://observablehq.com/@d3/zoomable-icicle 。第一个屏幕选项有效,但是当我单击该项目时,它失败了。以下更改有效:

我在旋转缩放或单击功能时遇到问题:

我试过反转x和y。我将功能更改为:

它仍然无法正常工作,我不知道还能做什么。

0 投票
1 回答
114 浏览

python - Plotly Express Icicle 可视化中的自定义排序

我正在处理一个具有季度任务的数据集,并且我试图通过一个快速表达的冰柱图表来可视化它。数据的结构方式是这样的:

客观的 四分之一 任务 地位 价值
完成项目 A 1 排序数据 完全的 1
完成项目 A 2 清理数据 完全的 1
完成项目 A 2 可视化绘图 完全的 1
完成项目 A 3 开始报告 进行中 1
完成项目 A 3 编辑报告 还没开始 1
完成项目 B 1 电子邮件老板 还没开始 1

问题出在图表中,即使使用这种格式读取数据,它也会根据对应于该季度的行数对其进行排序。因此,在图中,项目 a 的第 2 季度和第 3 季度将排在第一位,而第 1 季度则排在最后。我想把它翻转过来,使它按照季度的顺序排列,即 Q1->Q2->Q3->Q4,但我似乎找不到在情节表达中做到这一点的好方法。以下是我目前正在使用的代码:

我遇到的另一个问题是,我将它按状态列着色,但每当一个季度的混合状态不是全部一个状态(即全部完成或进行中)时,它默认为紫色,即其余单元格基本上不可读。有没有办法可以更改默认颜色,而不会丢失状态的颜色?