d3.js 条形图排序：无法弄清楚如何将 x 轴标签与条形一起排序

Question

我正在制作一个基于Scott Murray's tutorial 的可排序 d3 条形图，但他没有解释如何将 x 轴标签与条形一起排序，尽管有各种不同，我还是无法弄清楚尝试。这是我的代码；相关的功能是靠近底部的“sortBars”，但我已经将其余的用于上下文。

（Here's a fiddle，但我似乎无法从我的 JSON 中正确转换数据。）

条形高度是 data.days（它们是数字，即天数）；标签是 data.names。如何对标签进行排序？

  function retirements(presidents){
    var data = presidents;

    var margin = {top: 20, right: 20, bottom: 180, left: 80},
        width = 1100 - margin.left - margin.right,
        height = 650 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .domain(data.names)
        .rangeBands([0, width], .1);

    var y = d3.scale.linear()
      .domain([0, Math.ceil(d3.max(data.days)/1000)*1000])
      .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return d + " days";
      })

    var svg = d3.select(".container")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);

    var barWidth = width / data.days.length;

    svg.selectAll("rect")
        .data(data.days)
      .enter().append("rect")
      // this might be affected:
        .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })
        .attr("y", function(d) { return y(d); })
        .attr("height", function(d) { return height - y(d) + 1; })
        .attr("width", barWidth - 1)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.9em")
          .attr("dy", ".25em")
          .attr("transform", "rotate(-50)" );

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "-6em")
        .attr("dx","-15em")
        .style("text-anchor", "end")
        .text("Days");

    var sortOrder = false;

    var sortBars = function() {
      svg.selectAll("rect")
        .sort(function(a, b) {
          if (sortOrder) {
            return d3.descending(a, b);
          } else {
            return d3;
          }
         })
        .transition()
        .duration(1000)
        .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })

    $("#descending").on("click", function(){
     sortOrder = true;
     sortBars();
    });

    $("#chronological").on("click", function(){
      sortOrder = false;
      sortBars();
     });
    };

Answer 1

首先，而不是拥有 2 个不同的总统数组及其数据。 让我们把它变成单个对象，这样分类就很容易了。

var newData = [];
data.names.forEach(function(d, i) {
  newData.push({
    name: d,//now object will have a name
    days: data.days[i],//days will hold the president data
    id: i //id of the record for chronology sorting
  })
});

现在进行排序：

var sortBars = function() {

    if (sortOrder){
    //sort on basis of date
    var sorted = newData.sort(function(a, b) {
            return d3.descending(a.days, b.days);
    });
  } else {
    //sort on basis of id
    var sorted = newData.sort(function(a, b) {
            return d3.ascending(a.id, b.id);
    });
  }
  //set the domain post sorting  
  x.domain(sorted.map(function(d) {
    return d.name;
  }))
  //sort the bars
  svg.selectAll("rect")
    .sort(function(a, b) {
      if (sortOrder) {
        return d3.descending(a.days, b.days);
      } else {
        return d3.ascending(a.id, b.id);
      }
    });
  //make transition
  var transition = svg.transition().duration(750),
    delay = function(d, i) {
      return i * 50;
    };

  //transition dor xa axis labels
  transition.select(".x.axis")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.9em")
    .attr("dy", ".25em")
    .attr("transform", "rotate(-50)")
    .delay(delay);
  //transition for bars.
  transition.selectAll("rect")
    .attr("transform", function(d, i) {
      return "translate(" + i * barWidth + ",0)";
    });
}

工作代码here

希望这会有所帮助！