在D3 Streamgraph中正确使用stack.values（[accessor]）？ [英] Correct usage of stack.values([accessor]) in D3 Streamgraph?

问题描述

我尝试使用值访问器创建一个D3流图图表，其中包含每个图层的附加数据，如 D3 API参考和

I am trying to create a D3 streamgraph chart with additional data per layer using a values accessor, as demonstrated in the D3 API reference and this question at Stack Overflow.

这个标题附加很好，但它不会出现以附加值。关于可能出错的任何想法？

The title appends fine, but it does not appear to append the values. Any ideas on what might be going wrong?

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

I'm new to d3 so I'm sure it's straightforward. The code is below.

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) { return d.values; });

var area = d3.svg.area()
    .x(function(d) { 
        return d.x * width / mx; 
    })
    .y0(function(d) { 
        return height - d.y0 * height / my; 
    })
    .y1(function(d) { 
        return height - (d.y + d.y0) * height / my; 
    });

var vis = d3.select("#chart")
  .append("svg")
    .attr("width", width)
    .attr("height", height);

vis.selectAll("path")
    .data(stack(layers))
  .enter().append("path")
    .attr("d", area)
  .append("title")
    .text(function(d) { return d.name; });

推荐答案

堆栈布局知道您指定的值访问器，但区域发生器不。因此，您必须将 d.values 而不是 d 传递给区域生成器，如下所示：

The stack layout knows the values accessor you've specified, but the area generator does not. So, you have to pass d.values rather than d to the area generator, like so:

.attr("d", function(d) { return area(d.values); })

这篇关于在D3 Streamgraph中正确使用stack.values（[accessor]）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！