标签: stream-graph

R中是否有任何Streamgraph实现？

Streamgraphs是叠加图形的变体,是Havre等人的ThemeRiver在选择基线,图层排序和颜色选择方面的改进.

例:

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

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

但是我想从右边输入实时数据并从左边离开旧数据,这样我总是有一个200个样本的窗口.我该如何做到这一点,以便我有适当的过渡？

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

  data0 = d3.layout.stack()(a);

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

提前致谢.

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

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

实现期望的结果没有问题,唯一的问题是两个状态之间的转换看起来并不像预期的那样.

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

按更新按钮以查看效果

test_data0 = [{"0": 0.0, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.6, "-1": 0.0}, {"0": 0.0, "1": 0.3, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.6}, {"0": 0.3, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.3, "-1": 0.3}, {"0": 0.3, "1": 0.0, "-1": 0.0}, {"0": 0.3, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.0}]
test_data1 = [{"0": 0.0, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.6, …

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

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

有什么建议？

我是D3的新手，所以我的问题可能很简单，但对我来说这是一个大问题。

题：

如何垂直制作Streamgraph？我的JSFiddle

我有这个：

我应该有这个：

小提琴在这里

JS

var dataMetric = [
    {
        "id": 1,
        "title": "Little Inc",
        "metrics": {
            "offers": 665,
            "shares": 20,
            "landings": 1124,
            "leads": 1102,
            "purchases": 88,
            "friends": 74
        }
    },
    {
        "id": 2,
        "title": "Marvin LLC",
        "metrics": {
            "offers": 20,
            "shares": 2,
            "landings": 20,
            "leads": 25,
            "purchases": 28,
            "friends": 18
        }
    },
    {
        "id": 3,
        "title": "Hodkiewicz, Jacobson and O'Conner",
        "metrics": {
            "offers": 834,
            "shares": 8,
            "landings": 759,
            "leads": 683,
            "purchases": 41,
            "friends": 35
        }
    }, …

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

...以便每个路径都有一个显式数据键,以便鼠标悬停记录数据键.

官方示例添加路径如下:

var area = d3.svg.area()
   .x(function(d) { console.log('x', d.data); return d.x * w / mx; })
   .y0(function(d) { return h - d.y0 * h / my; })
   .y1(function(d) { return h - (d.y + d.y0) * h / my; });
vis.selectAll("path")
 .data(data0) 
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area);

我尝试调整代码如下,但我不知道如何更改data0(当前是数组的数组)的结构来实现我想要的:

vis.selectAll("path")
 .data(data0, function(d) { return d.name }) // Add key function
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area) …

我正在尝试使用值访问器创建一个带有每层附加数据的D3流图表,如D3 API参考和Stack Overflow中的这个问题所示.

标题附加正常,但似乎没有附加值.关于可能出错的任何想法？

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

var layers = [
  {
    "name": "apples",
    "values": [
      { "x": 0, "y":  91},
      { "x": 1, "y": 290}
    ]
  },
  {  
    "name": "oranges",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 49}
    ]
  }
];

var     m = 2; // number of samples per layer
var width = 960,
    height = 500,
    mx = m - 1,
    my = 350;

var stack = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) { …