D3条形图排序不起作用答案

【问题标题】：D3 bar chart sorting not workingD3条形图排序不起作用
【发布时间】：2017-02-20 06:19:25
【问题描述】：

我用简单的 .csv 数据创建了一个条形图。第一列是“团队”，其中包含团队名称作为文本；第二列是“进球数”，其中包含进球数。
但随后我想对条形图进行排序，以便拥有更多目标的团队排在第一位。我尝试了所有可以在网上找到的东西，但它们都不适用于我的情况。我很困惑……

代码：

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

svg = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("StatsByClub1.csv", function(d) {
  d.Goals = +d.Goals;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.Team; }));
  y.domain([0, d3.max(data, function(d) { return d.Goals; })]);

  svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Goals");

  svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
  // sorting does not work!
      .sort(function(a, b) {d3.descending(a.Goals, b.Goals)})
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.Team); })
        .attr("y", function(d) { return y(d.Goals); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.Goals); });

数据如下：

Team    Goals
Man. United 49
Man. City   71
Arsenal 65
Hotspur 69
Liverpool   63
Chelsea 59
Everton 59
Swansea 48
Stoke City  41
Sunderland  42

【问题讨论】：

标签： sorting d3.js bar-chart

【解决方案1】：

使用d3.descending对数据数组进行排序，其中：

如果a大于b，则返回-1，如果a小于b，则返回1，或者0。这是逆自然顺序的比较器函数，可以与内置的数组排序方法结合使用按降序排列元素。

因此，请在加载数据之后，在设置域之前将其放置：

data.sort((a, b) => d3.descending(a.Goals, b.Goals));

【讨论】：