1

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; });
Community
  • 1
  • 1
Derek Hill
  • 5,965
  • 5
  • 55
  • 74
  • Can you provide me the code to do this ? I copy your code but it doesn't work. Thanks. Sorry, I'm new to d3 and js. – thd Dec 27 '12 at 14:35
  • 1
    @DuongThang I'm afraid I don't have this handy anymore. It definitely worked. Maybe if you post a question with your code I can take a look at it. – Derek Hill Dec 28 '12 at 09:15

1 Answers1

7

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); })
mbostock
  • 51,423
  • 13
  • 175
  • 129