问题标签 [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 投票
1 回答
442 浏览

javascript - 如何为 protovis 流图制作动画?

我无法弄清楚如何为 protovis 流图制作动画。我认为最好的方法是简单地将一组i, j索引传递给.layers()并让.x()and.y()函数查找实际的更新值。有没有更简单的方法?

0 投票
1 回答
495 浏览

javascript - 在 Protovis 中向 pv.Layout.Stack(流图)添加标签

我正在使用 Protovis 库来制作数据流图。我想用“单词”数组标记不同的层。我似乎无法用词来排列我想要的样子。我希望将它们插入到该特定层的图形最大的位置,类似于此站点:

http://mbostock.github.com/protovis/ex/jobs.html

在此处输入图像描述

0 投票
2 回答
39621 浏览

javascript - D3 实时流图(图形数据可视化)

我想要一个流图,如本例所示:http: //mbostock.github.com/d3/ex/stream.html

在此处输入图像描述

但我想从右边输入实时数据,从左边留下旧数据,这样我总是有一个 200 个样本的窗口。我将如何做到这一点,以便我有适当的过渡?

我尝试更改数组 a 中的数据点,然后重新创建一个区域

但我的过渡并没有使它看起来像图表在屏幕上滑动。

提前致谢。

0 投票
2 回答
7495 浏览

javascript - d3.js:如何添加数据键?

我正在学习 D3.js 并试图了解与流图一起使用的数据键。我想改编官方流图示例

在此处输入图像描述

...这样每个路径都有一个明确的数据键,并且鼠标悬停记录数据键。

官方示例添加路径如下:

我尝试按如下方式调整代码,但我不确定如何更改data0(当前为数组数组)的结构以实现我想要的:

就目前而言,如果我没有对 的结构进行任何更改data0,毫无疑问它是行不通的。如何在不弄乱and函数的情况下添加name属性?data0area.data()

更新:更清楚一点:D3 文档说area 函数需要一个二维数组。因此,如果我data0从一个二维数组更改为一个对象数组,每个对象都有一个name键和一个data键,我怎样才能更改我传递给的内容area

0 投票
1 回答
823 浏览

matplotlib - matplotlib中的堆积线/面积图

我有一个关于 matplotlib 的问题,我已经知道我正在做的事情在某种意义上在统计上/数学上并不正确,但无论如何我想使用堆叠的线/面积图进行可视化。

我的测量没有使用相同的 x 轴作为基础。我的意思是不同的行没有相同数量的数据点。我想将时间用作 x 轴,并且所进行的测量与完全相同的时间戳无关(想想分布式系统)。

我想我的问题是:“我可以在 matplotlib 中做到这一点而不自己进行插值吗?”

这里有一些关于什么是堆叠图的深入阐述:http: //www.leebyron.com/else/streamgraph/download.php ?file=stackedgraphs_byron_wattenberg.pdf

干杯,马克

0 投票
1 回答
938 浏览

javascript - Raphael 中的堆叠折线图或流线图?

有人在 Raphael 中有任何堆叠图(或流图)的例子吗?

我想知道是否有与此D3 流图等效的 Raphael 工作:

在此处输入图像描述

我见过的最接近的是这个折线图示例:

在此处输入图像描述

我想我可以基于此敲出一个堆叠图,但如果有人已经有了一些大纲代码,那就太好了。

0 投票
1 回答
1004 浏览

javascript - 如何将 x,y,y0 以外的属性附加到 d3 中的流图层?

我是 d3 新手,我一直在尝试自定义 Streamgraph 示例(http://mbostock.github.com/d3/ex/stream.html):

在此处输入图像描述

我遇到了一些问题:

我想为流中的每个图层分配一个自定义数据属性(例如,让我们说它是一个名为“类型”的标签),以便当您将鼠标悬停在该图层上时,会出现一个弹出框,其中列出了“类型”那一层。

当我将数据源输入图表时,我使用以下代码:

该图似乎只采用以下格式的数据:

上面的每个子数组对应于流图中的一个层。

如何将数据传递给允许我为每一层添加额外的“类型”属性的图表?

基本上,当我参考图层的数据时,我可以输入类似 d.type 的内容并提取该属性?

我最初想出了一个非常骇人听闻的方法来做到这一点:

然后我通过说 d[0].type 在层数据中引用它,但这似乎不是正确的方法。

0 投票
1 回答
1716 浏览

javascript - 流图:两个问题

我一直在玩 D3.js,我正在尝试使用实时数据制作流图可视化。

我确实研究了这篇文章 http://bost.ocks.org/mike/path/

我还阅读了这个问题并回答 了矩形内的 Svg 剪辑路径不起作用 ,但这是一条线。我确实有一个 d3.svg.area 对象

然后我读了这篇文章 D3 Real-Time streamgraph (Graph Data Visualization) 但仍然找不到任何答案

我的两个问题:

  • 绘制流图时,我注意到图总是设置在底部。每次刷新计算函数都会找到最大数据并将图形底部设置在绘制图形的元素底部。

    /li>

我该怎么做才能让图形位于轴的中间?我想我必须玩弄面积的 x、y0 和 y1,但究竟如何?

  • 如果您尝试我的代码,则图表的一部分显示在左侧。我知道有问题:

    /li>

我在其他主题和网络上搜索任何回复,但我一直被困在这里!

这是我的代码:

0 投票
1 回答
2571 浏览

javascript - 在 D3 Streamgraph 中正确使用 stack.values([accessor])?

我正在尝试使用值访问器创建一个 D3 流图,其中每层包含额外的数据,如D3 API 参考Stack Overflow 上的这个问题所示

标题附加得很好,但似乎没有附加值。关于可能出现问题的任何想法?

我是 d3 的新手,所以我确信它很简单。代码如下。

0 投票
0 回答
978 浏览

javascript - D3 流图的数组格式

https://github.com/mbostock/d3/wiki/Stack-Layout

http://mbostock.github.com/d3/ex/stream.html

在此处输入图像描述

我正在尝试使用 D3.js 制作流图。查看示例,我们看到数据是通过辅助函数制定的stream_layers(n, m)。在此示例中,返回一个数组,如 API 中所述。API 描述输入 x、y 和 y0。但该示例使用 x, y0, y1。

我的数据集的公式类似于 API 中描述的数据集:

堆叠此数据集的辅助函数会是什么样子?该示例返回一个 3D 数组(一维表示层数,一维表示样本数,一维表示m每个样本的 y 值)。