d3.js条形图排序:can't弄清楚如何将x轴标签与条形图一起排序

d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars

本文关键字：排序 条形图 一起 标签 can js d3 弄清楚      更新时间：2023-09-26

我正在根据Scott Murray的教程制作一个可排序的d3条形图，但他没有解释如何将x轴标签与条形图一起排序，尽管进行了各种尝试，我还是没能弄清楚。这是我的密码；相关的函数是底部附近的"sortBars"，但我已经将其余部分包含在上下文中。

（这是一个问题，但我似乎无法正确地从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();
     });
    };

首先不要有两个不同的总裁及其数据数组。让我们把它变成一个对象，这样tat排序就很容易了。

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)";
    });
}

此处的工作代码

希望这能有所帮助！

相关文章：