在D3中对条形图进行排序

Question

I created a bar chart in D3 and I'm trying to sort the bars in a bar chart in ascending order on clicking, and on descending on clicking again. I added in the necessary code for sorting at the end of the code snippet but nothing happens on clicking (the bars don't sort). Not sure what I'm missing here, any help would be appreciated!

    <script>

    var margin = {top: 40, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var formatPercent = d3.format(".0%");

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

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

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(formatPercent);

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
      })

    var svg = d3.select("body").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);

    d3.tsv("data/bar-graph-tooltips.tsv", type, function(error, data) {
      x.domain(data.map(function(d) { return d.letter; }));
      y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

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

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

      svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.letter); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.frequency); })
          .attr("height", function(d) { return height - y(d.frequency); })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide)
          .on("click", function() {sortBars();});

          //Define sort order flag
        var sortOrder = false;

        //Define sort function
        var sortBars = function() {

            //Flip value of sortOrder
            sortOrder = !sortOrder;

            svg.selectAll("rect")
               .sort(function(a, b) {
                    if (sortOrder) {
                        return d3.ascending(a, b);
                    } else {
                        return d3.descending(a, b);
                    }
                })
               .transition()
               .delay(function(d, i) {
                   return i * 50;
               })
               .duration(1000)
               .attr("x", function(d, i) {
                    return xScale(i);
               });

        };          
    });


    function type(d) {
      d.frequency = +d.frequency;
      return d;
    }

    </script>

Answer 1

You need to set the values that need to be sorted in the a, b , here:

.sort(function(a, b) {
                if (sortOrder) {
                    return d3.ascending(a, b);
                } else {
                    return d3.descending(a, b);
                }

Something like: a.value, b.value but that depends on how your tsv is structured