Question

我创建了一个带有简单.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

Answer 1

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

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

因此，在加载数据之后，在设置域之前将其设置为正确：

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

D3条形图排序不起作用

1 个答案: