Correct usage of stack.values([accessor]) in D3 Streamgraph?

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?

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; });

Answers:

Answer

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); })

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.