问题标签 [sankey-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 投票
0 回答
266 浏览

r - 由于 config.yml 文件路径斜杠,R rChart 图不会显示

从 rChart 包中,从 config.yml 文件中读取依赖项,如下所示:

问题是,在路径中读取时,R 似乎遇到了正斜杠和反斜杠的问题,并且不会显示图形:

在网络浏览器中检查绘图元素时,显示如下:

似乎它会自动附加“\”,这就是导致它无法读取依赖项的原因。

有人遇到过这个问题吗?

0 投票
1 回答
2548 浏览

python - 在 matplotlib 中连接两个 Sankey 图

我正在尝试使用 matplotlib 代表一个国家的气体平衡。

这个想法是,我想使用一个 Sankey 绘制三个进口天然气来源,并将其连接到另一个具有其他天然气来源(生产、天然气储存)和天然气消费者作为流出的 Sankey。

我尝试了很多次,但我无法将两个图表连接在一起

每个图表都按设计单独绘制。但是,一旦我添加"prior=0, connect=(3,0)"了应该将两个图表连接在一起的内容,一切都会出错,给我带来我无法完全理解的错误。这是代码。

这个想法是将第一个图的 3 个流出量(具有 -23.196 值)与第二个 sankey 的 0 个流入量(也具有 23.196)连接起来

这是错误文本:

所以我不确定两个图之间的连接是否有问题(由 sankey.pyc 试图显示的文本建议)还是 matplotlib 本身有问题"TypeError: not enough arguments for format string"

0 投票
2 回答
3494 浏览

javascript - 从 csv 文件获取 D3 中的桑基图

我正在尝试从csv文件创建一个桑基图。我正在使用由及时组合提供的代码,以及来自 d3 站点的代码(甚至是示例 csv 文件)。但是,当我尝试在 Chrome 中运行代码时,我得到一个空白的 Html 页面,表明代码正在崩溃。我试图将源代码重定向到我桌面上的文件,但我仍然遇到同样的问题。(我在一台装有 Windows XP 的电脑上工作)

我已经粘贴了下面的代码:

如果有人可以告诉我我做错了什么,请告诉我。

编辑:这是我使用的示例数据,由及时投资组合提供

0 投票
1 回答
1148 浏览

javascript - 在 D3 插件 sankey.js 和 html 代码之间定义源代码

我正在尝试创建一个 Sankey 图,虽然我现在可以加载我的源代码,但我在sankey.js和我的 html 代码之间遇到了一个小问题。

当我运行 HTML 代码时,我收到如下错误消息: Uncaught TypeError: Cannot call method 'push' of undefined

这是错误链接将我指向的位置:

这是 HTML 代码中的输入(我的数据取自 csv 文件)。

我的问题是:sankey.js 是否依赖于我的数据来自 json 文件的假设?. 如果是这样,我该如何调整它以使其与 csv 文件兼容?数据保存为下面列出的 csv 文件:

0 投票
1 回答
1594 浏览

javascript - D3.js sankey 的解析和无效值

我目前正在尝试使用 D3.js 创建一个简单的桑基图。我已经完成了大部分工作,但设置高度和 y 轴被证明是一个挑战。具体来说,返回的错误如下:

错误:解析 d="M15、NaNC479、NaN 479、NaN 943、NaN" 时出现问题 错误:属性 height = "NaN" 的值无效

我试图按照示例(有效):http ://bost.ocks.org/mike/sankey/ 我的示例在这里:http: //zenbot.ca/elections.html

请注意,下面的文本(“Brockville”、“Central Toronto”等)只是一个测试,以确保我正确连接到 JSON 文件,因此您可以忽略它。页面顶部的 blob 应该看起来像 Sankey 图,但目前不是。

我的 JSON 样本(可在http://zenbot.ca/js/electionJSON.json获得)似乎以与 Bostock 先生的示例相同的方式形成(http://bost.ocks.org/mike/ sankey/energy.json)并且如下:

我自己尝试解决问题的方法是使用“d.dy”值(尝试用“d.amount”替换它)。将其硬编码为“100”而不是大约第 79 行的函数会使一个节点出现,但其余的仍然是一团乱麻。

所以......它似乎取决于节点的高度和位置。它看起来很像 Bostock 的例子,但显然不是。有任何想法吗?

使 sankey 工作的代码如下:

0 投票
1 回答
5605 浏览

javascript - 沿 D3 Sankey 图中的链接渐变

是 a 的 jsfiddle Sankey diagram

在此处输入图像描述

我正在尝试修改链接的颜色,以便每个链接的颜色实际上是从其源节点颜色渐变到其目标节点颜色。(假设不透明度将保持 0.2 或 0.5,具体取决于鼠标是否悬停在链接上;因此链接将比节点保持“淡”一点)

我看了一下这个很好且有启发性的示例,它绘制了这个渐变填充循环:

在此处输入图像描述

但是,我根本无法将该解决方案集成到我的解决方案中,对于给定的任务来说它看起来太复杂了。

另外,请注意原始桑基图中的链接在节点被拖动时移动,并且即使在那些临时状态下也必须显示渐变。一个小问题也是链接和节点的透明度,以及绘图的顺序。我会很感激想法,提示。

0 投票
6 回答
6110 浏览

javascript - d3 sankey 图表 - 沿 x 轴手动定位节点

我在使用d3 sankey实现时遇到的一个问题是无法指定节点在 x 轴上的位置。我一直在研究源代码,实际上并没有一种“干净”的方式来以合理的比例指定 x 值(即 1-5,其中图表为 5 个节点宽)。我正在创建一些可以用作教育课程规划器的东西,因此 x 值将与学期相对应。假设我有一门直到大学二年级才能上的课程,这将是 x 为 3(1/2 是大一,3/4 是大二,等等)。问题是,如果事先没有任何链接到这门课程,它的 x 总是为 1,所以我想把它推到右边的两个空格。

我注意到实际桑基图中的 x 值并不能反映它有多少个节点,所以这有点难以做到。

我也遇到过这个问题,我意识到默认情况下图表不会让我定位节点。我可以毫无问题地调整 sankey.js 示例来完成此操作,但目前我对如何执行此操作感到困惑。

0 投票
3 回答
180 浏览

javascript - 为什么这个论点不起作用?

我正在尝试动态生成值并将其传递给函数。

这是我的代码,

当我将颜色变量传递给该函数时,它失败了。

如果我直接给出字符串,而不是传递参数,它会起作用。

是什么原因?我该如何克服呢?

0 投票
2 回答
3541 浏览

r - 使用 d3_sankey 重现桑基图示例时出现问题

我正在尝试使用rCharts库重现简单示例来绘制sankey图表。我从头开始找到这个例子并试图重现它,但是,我遇到了一些问题。

首先,我尝试在没有任何内容的情况下运行此代码。然后我发现并意识到我的电脑需要 d3_sankey。所以,我从这里下载并复制到C:\Users\adomas\Documents\R\win-library\3.0\rCharts\libraries\widgets\d3_sankey.

然后我再次尝试了未更改的代码,但仍然出现以下错误:

Error in file(con, "r") : cannot open the connection In addition: Warning message: In file(con, "r") : cannot open file '/config.yml': No such file or directory

由于这也没有帮助,我尝试从以下位置更改路径: sankeyPlot$setLib('libraries/widgets/d3_sankey') sankeyPlot$setTemplate(script = "libraries/widgets/d3_sankey/layouts/chart.html")

sankeyPlot$setLib('C:/Users/adomas/Documents/R/win-library/3.0/rCharts/libraries/widgets/d3_sankey') sankeyPlot$setTemplate(script = "C:/Users/adomas/Documents/R/win-library/3.0/rCharts/libraries/widgets/d3_sankey/layouts/chart.html")

但是,这一次,查看器中出现了空白屏幕,但没有实际的桑基图,我在控制台中得到以下信息: Warning message: In readLines(file, warn = warn, ...) : invalid input found on input connection 'C:/Users/adomas/Documents/R/win-library/3.0/rCharts/libraries/widgets/d3_sankey/layouts/chart.html

我尝试过更改路径等,但仍然有问题。而且我不确定我是否需要使用sankeyPlot$setTemplate。我想在我闪亮的应用程序中使用桑基图,但首先我想在 R 中简单地重现。建议会有很大帮助!

库版本: rCharts_0.4.2 igraph_0.7.0 R 版本:3.0.2

编辑: 我在不同的系统上尝试过这段代码。一切都在那里工作。库和 R 的版本相同,我复制了相同的文档并指定了完整路径。我在自己的电脑上再次尝试过,但仍然出现同样的错误。

0 投票
1 回答
4429 浏览

d3.js - 如何创建具有弯曲节点端点的桑基图?

我正在使用D3.js 及其 sankey 插件为我的数据集生成 sankey 图表。

长话短说,我对插件源做了一些修改(以获得不同的分支宽度),目前看起来像:

在此处输入图像描述

现在我试图让分支向下(和向上)弯曲,有点像来自维基百科的这张图片减去整个环回的东西):

在此处输入图像描述

我的问题是,这可能吗?好吧,我知道它是可能的,这只是一个兔子洞有多大。我以前从未使用过 SVG,这是我第一次涉足 D3,所以我不太确定自己要进入什么领域。

或者,是否有另一个库可以生成我想要的图表?我遇到了这个 python 库,它看起来可以做我想做的事,但我从来没有写过一行 Python,如果我可以避免它,我宁愿不(至少今天)。