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

问题描述

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

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])?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！