Question

在我之前的问题：d3.js stacked bar chart - modify stack order logic中，我了解到d3没有现成的解决方案，可以按堆栈中的各个值进行排序。 D3的stack.order()只能对整个系列进行排序。我还了解到，我需要编写一个自定义函数来实现此目的。

在进入功能之前，让我在这里解释动机。我想在总计总数旁边显示比例，这是d3堆叠条形图最擅长的。但是，我希望重点放在排名上。这就是为什么我需要更改每个堆栈中各个矩形的排序顺序，以反映排名的任何变化。最大值应在堆栈的顶部，而最小值应在堆栈的底部。如前一篇文章中所述，堆叠条形图的典型输出将所有矩形集总成仅基于初始顺序。

再次提供代码以供参考：

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>

在调用d3.stack()之后，数据结构变得非常复杂，这对我来说是一个挑战。任务类似于根据嵌套数组中的对象值对整个数组进行排序。

我最大的尝试是：

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

哪个返回了错误：

排序函数必须是函数或未定义

事实证明，这比我想象的要困难得多，因此我尝试在堆栈之前对数据进行排序，但结果是堆栈不正确，关系丢失了。

这个类似的问题充满了希望：Sorting a d3.js stacked bar chart

但是，由于该方法未使用d3.stack()，因此该解决方案不适用于我的特殊情况或使用d3.stack()的任何情况。

问题

当数据为d3.stack()格式时，按单个值对数据排序的解决方案是什么？

Answer 1

我将使用自定义堆栈函数，如下所示。我试图获得与堆积条形图类似的数据结构，只是我按键而不是按索引对值进行了分组。这样，我可以更轻松地对它们进行排序。

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>

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

问题

1 个答案: