问题标签 [stream-graph]

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 投票
5 回答
10802 浏览

r - R中的流图?

R中是否有Streamgraphs的实现?

流图是堆叠图的一种变体,是对 Havre 等人的 ThemeRiver 在基线选择、层排序和颜色选择方面的改进。

例子:

在此处输入图像描述

参考: http: //www.leebyron.com/else/streamgraph/

0 投票
1 回答
811 浏览

javascript - D3流图图层淡入淡出功能

我最近发现了这个 Streamgraph http://bl.ocks.org/1963983

在此处输入图像描述

我正在尝试将该示例中的淡入淡出功能实现到我自己的流图中,但没有成功。

我的显然比那个例子中的复杂得多。任何意见或建议将不胜感激!

谢谢。

0 投票
1 回答
2648 浏览

javascript - 向流图 d3.js 添加动态工具提示

我目前正在处理流图,我想向每一层添加工具提示,类似于http://archive.stamen.com/mtvmovies-streamgraph/chart.html

在此处输入图像描述

我现在拥有的工具提示根本不起作用。我得到的只是工具提示框中显示的“NaN”。

有什么建议么??我的代码如下。

提前致谢。

0 投票
1 回答
685 浏览

d3.js - D3 流图的可读标签

我正在尝试将可读标签应用于使用完全动态数据呈现的 D3 Streamgraph - 各种不同的数据集随着时间的推移从实时数据演变而来,并且提供的控件也用于操作所显示的内容。所有这一切都很好——问题是如何清楚地标记流——没有使用图例。

所需的色调和亮度的巨大变化使得为浮动在图形上的标签选择可读的样式非常棘手,特别是在有限的 SVG 样式可用跨平台并且标签有时也会不可避免地在背景上重叠的情况下。例如,黑色标签“有效”,但有时在较暗颜色的顶部很难阅读(我们确实需要确保良好的范围)......

有人做过类似/解决过同样挑战的事情吗?我目前正在考虑改用图例。

0 投票
1 回答
329 浏览

javascript - 向流图添加更新工具提示

我有一个流图,我想添加当鼠标悬停在每个流上时出现的工具提示,就像这个例子:

http://archive.stamen.com/mtvmovies-streamgraph/index.html

在此处输入图像描述

我现在有一些类似的工具提示,但它们只显示每个流中的第一个值,所以无论我将光标悬停在流中的哪个位置,我都只会收到起始值。此外,工具提示不是连续的,所以当我移动光标时,工具提示消失了

这是我现在使用的代码。

有人有什么建议或建议吗??

0 投票
2 回答
1310 浏览

javascript - 使用新数据更新 D3 流图

我有一个流图,我想通过更改它的数据来更新它。我有一个在数据集之间完美转换的折线图,我正在尝试为我的流图调整相同的代码,但收效甚微。我可以更改每个流的颜色,但不能更改数据。

这是我的更新行功能

这是我对流图的相同功能的尝试...

颜色会改变,但值不会传递到图表。任何意见或建议将不胜感激!!

0 投票
1 回答
2406 浏览

javascript - 将新数据添加到 d3 流图时的转换

我使用 d3 绘制了一个非常类似于官方示例http://bl.ocks.org/mbostock/4060954的流图:

在此处输入图像描述

唯一的区别是我如何用新数据更新它。我不仅想要垂直(y 值)过渡,还想要在右侧添加新数据点。整个图形应该在水平方向上被压缩。

达到预期的结果是没有问题的,唯一的问题是两种状态之间的转换看起来不像预期的那样。

您可以在 JSfiddle 上找到一个奇怪的过渡效果的最小示例:http: //jsfiddle.net/jaYJ9/4/

按下更新按钮查看效果

0 投票
3 回答
3871 浏览

javascript - D3.js 流图示例 - 生成正确的面积函数值

我是 d3js 的新手,并试图从这里http://bl.ocks.org/mbostock/4060954调整流图示例:

在此处输入图像描述

...使用我自己的数据来跟踪来自不同地方(在线、留言簿、博物馆)的艺术展览的参观者。我已经取得了一些进展,我认为我的数据格式正确,但是我得到了一些非常不稳定的最终 y 值,而我的示例没有显示任何内容。

我的数据以 csv 开头:

然后我嵌套它以按场地(在线、博物馆、留言簿)组织成 3 层/流:

生成页面时,y 值始终为 800,svg 路径对象的宽度为 1400 像素,高度为 0。我不确定这是否是我如何将输入域缩放到输出范围的问题,或者是否是面积函数生成 y 值的问题。下面是点值显示的一个生成路径的示例:

这是我的完整页面 - 非常感谢一些指导,因为我觉得我在这里遗漏了一些简单的东西。

这是数据 csv 文件

谢谢!

0 投票
1 回答
1067 浏览

javascript - 如何使流图响应式(d3.js)?

我正在为我的公司使用 d3.js 制作流图,我想知道如何让它响应。我的代码与此示例没有太大区别:http: //bl.ocks.org/mbostock/4060954

在此处输入图像描述

我一直在玩设置viewBox="0 0 height width"preserveAspectRatio = "xMinYMid meet"但无济于事。

有什么建议么?

0 投票
1 回答
7807 浏览

javascript - 如何使用突变观察者而不是突变事件?

我正在尝试使用 D3.js 创建我的第一个流图。我从一个工作示例开始,其中包含来自在线发布的代码的工具提示,http ://bl.ocks.org/WillTurman/4631136 :

在此处输入图像描述

当我将index.htmldata.csv文件复制到我的 PC (Windows 7) 时,我可以在浏览器 (Firefox) 中看到流图。但是,我收到一个 JS 警告,“不推荐使用突变事件。请改用 MutationObserver。

哪些代码行对应于突变事件?我应该如何编辑它们以使用 MutationObserver 代替?

我是 D3 和 javascript 的新手。虽然我在网上找到了一些关于突变事件和 MutationObservers 的讨论,但我没有看到任何足以让我理解并适用于我的情况的基本示例。我会很感激任何提示。