如何在堆叠的d3条形图中添加正确缩放的y轴

Question

I've been working with Mike Bostock's stacked bar chart (here: https://bl.ocks.org/mbostock/4679202 ).

I've successfully made a number of modifications, but what I'm stuck on is trying to add ay axis with ticks and properly scaled values.

I thought it would simply be done by using this:

var yAxisRight = d3.svg.axis().scale(y2) //define ticks
    .orient("right").ticks(5); 

However, that results in the values for only ONE set of the stack being used for the entire Y axis. This results in an incorrect scale. The values for the range of all stacks COMBINED needs to be used to determine the range of values I believe.

Is there an easy way to do this that I'm missing? To sum the range of all the columns.

If not, how would I write a function to set the range based on the values in all 4 columns?

Here is a working JSfiddle of what I have now (which is incorrect): https://jsfiddle.net/1jhm7ths/

Answer 1

If I understood correctly what you tried to achieve, you need to compute your range based on your stacked data and not the original ones. I updated your jsFiddle with the following modification on line 92:

y2.domain([0, d3.max(dataByGroup, function(d) { return d3.sum(d.values, function(v) {return v.value;}); })]); //added

What this does is taking each group, computing the sum of all values, and the taking the max of the sums.

On a side note, I would discourage learning d3 v3 and try to focus on the v4 for longer term support, latest functionalities, modulariy, and a ton of other advantages.