d3.js 堆叠条形图排序/更改堆栈中各个值的顺序

Question

In my earlier question: d3.js stacked bar chart - modify stack order logic I learned that d3 doesn't have an off the shelf solution for sorting by individual values within a stack. D3's stack.order() can only sort the entire series. I also learned that I will need to write a custom function to achieve this.

Before I get into the function, let me explain the motivation here. I want to show proportions alongside the aggregate total, which is what d3 stacked bar charts are good at. However, I want the emphasis to be on the ranking. This is why I need to change the order the individual rects are ordered in each stack, to reflect any changes in ranking. The biggest values should be at the top of the stack, and the smallest values should appear at the bottom. As noted in the previous post, the typical output for stacked bar charts lumps all rects into stacks based only on the initial order.

Code again for reference:

 var margins = { top: 100, bottom: 300, left: 100, right: 100 }; var height = 600; var width = 900; var totalWidth = width + margins.left + margins.right; var totalHeight = height + margins.top + margins.bottom; var svg = d3.select('body') .append('svg') .attr('width', totalWidth) .attr('height', totalHeight); var graphGroup = svg.append('g') .attr('transform', "translate(" + margins.left + "," + margins.top + ")"); var data = [{ period: 't1', fmc1: 2, fmc2: 5, fmc3: 6, fmc4: 9, fmc5: 10 }, { period: 't2', fmc1: 3, fmc2: 4, fmc3: 9, fmc4: 8, fmc5: 11 }, { period: 't3', fmc1: 3, fmc2: 5, fmc3: 15, fmc4: 12, fmc5: 10 }, ]; var groups = d3.map(data, function(d) { return (d.period) }).keys(); var subgroups = Object.keys(data[0]).slice(1); var stackedData = d3.stack() .keys(subgroups) (data); //console.log(stackedData); var yScale = d3.scaleLinear() .domain([0, 80]) .range([height, 0]); var xScale = d3.scaleBand() .domain(['t1', 't2', 't3']) .range([0, width]) .padding([.5]); var colorScale = d3.scaleOrdinal() .domain(subgroups) .range(["#003366", "#366092", "#4f81b9", "#95b3d7", "#b8cce4", "#e7eef8", "#a6a6a6", "#d9d9d9", "#ffffcc", "#f6d18b", "#e4a733", "#b29866", "#a6a6a6", "#d9d9d9", "#e7eef8", "#b8cce4", "#95b3d7", "#4f81b9", "#366092", "#003366"].reverse()); graphGroup.append("g") .selectAll("g") .data(stackedData) .enter().append("g") .attr("fill", function(d) { return colorScale(d.key); }) .selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return xScale(d.data.period); }) .attr("y", function(d) { return yScale(d[1]); }) .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); }) .attr("width", xScale.bandwidth());

 <script src="https://d3js.org/d3.v5.min.js"></script>

With the data structure becoming significantly more complex after calling d3.stack() this has been a challenge for me. The task is akin to sorting the whole array of arrays based on object values within the nested arrays.

My best attempt was:

var sortTest = stackedData.sort(stackedData[1].sort((a, b) => a[0] - b[1]));

Which returned the error:

Sort function must be a function or undefined

This turned out to be much more challenging than I imagined, so I then tried to order the data before the stack but that resulted in an inaccurate stack, the relationships were lost.

There was a glimmer of hope with this similar question: Sorting a d3.js stacked bar chart

However, as the approach did not use d3.stack() , the solution was not applicable to my particular case or any case using d3.stack() .

Question

What is the solution for sorting data by individual values when the data is in d3.stack() format?

Answer 1

I'd use a custom stack function, like below. I tried to get a similar data structure as the stacked bar chart, only I have grouped the values by key instead of by their index. This way, I could sort them more easily.

 var margins = { top: 30, bottom: 50, left: 30, right: 30 }; var height = 300; var width = 600; var totalWidth = width + margins.left + margins.right; var totalHeight = height + margins.top + margins.bottom; var svg = d3.select('body') .append('svg') .attr('width', totalWidth) .attr('height', totalHeight); var graphGroup = svg.append('g') .attr('transform', "translate(" + margins.left + "," + margins.top + ")"); var data = [{ period: 't1', fmc1: 2, fmc2: 5, fmc3: 6, fmc4: 9, fmc5: 10 }, { period: 't2', fmc1: 3, fmc2: 4, fmc3: 9, fmc4: 8, fmc5: 11 }, { period: 't3', fmc1: 3, fmc2: 5, fmc3: 15, fmc4: 12, fmc5: 10 }, ]; var groups = data.map(function(d) { return d.period; }); var subgroups = Object.keys(data[0]).slice(1); var stackedData = data.map(function(d) { var orderedKeys = subgroups.slice().sort(function(a, b) { return d[a] - d[b]; }); var bottom = 0; var result = orderedKeys.map(function(key) { var value = d[key]; var result = [bottom, bottom + value]; result.data = d; result.key = key; bottom += value; return result; }); result.key = d.period; return result; }); console.log(stackedData); var yScale = d3.scaleLinear() .domain([0, 80]) .range([height, 0]); var xScale = d3.scaleBand() .domain(['t1', 't2', 't3']) .range([0, width]) .padding([.5]); var colorScale = d3.scaleOrdinal() .domain(subgroups) .range(["#003366", "#366092", "#4f81b9", "#95b3d7", "#b8cce4", "#e7eef8", "#a6a6a6", "#d9d9d9", "#ffffcc", "#f6d18b", "#e4a733", "#b29866", "#a6a6a6", "#d9d9d9", "#e7eef8", "#b8cce4", "#95b3d7", "#4f81b9", "#366092", "#003366"].reverse()); graphGroup.append("g") .selectAll("g") .data(stackedData) .enter() .append("g") .selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("fill", function(d) { return colorScale(d.key); }) .attr("x", function(d) { return xScale(d.data.period); }) .attr("y", function(d) { return yScale(d[1]); }) .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); }) .attr("width", xScale.bandwidth());

 <script src="https://d3js.org/d3.v5.js"></script>