排序D3中的条形图不工作 [英] Sorting bar chart in D3 not working

问题描述

我在D3中创建了一个条形图，显示了单选按钮条形图的选择，我想按升序或降序排序。当点击按钮不是排序，所以我不知道什么是错误，但任何帮助将赞赏：

I have created a bar chart in D3, on selection of radio-button bar chart is shown and I want to sort by ascending or descending order. When clicking the button it is not sorting, so I don't know what wen t wrong but any help would be appreciated:

http://jsfiddle.net/m4s5m5je/2/ [添加排序之前]

http://jsfiddle.net/m4s5m5je/2/ [Before adding sorting]

我按下排序按钮后，条形图也不显示和排序按钮：

After i put sort button, bar chart doesn't show up and sort button too:

http://jsfiddle.net/m4s5m5je/3/

var sort_btn = document.getElementById('sort')
sort_btn.on("click", function(){
    var self = d3.select(this);
    var ascending = function(a,b){
            return a.value - b.value;
    };
    var descending = function(a,b){
            return b.value - a.value;
    }
    var state = +self.attr("state");
    var txt = "Sort data: ";
    if(state === 0){
            data.sort(ascending);
            state = 1;
            txt += "descending";
    } else if(state === 1){
            data.sort(descending);
            state = 0;
            txt += "ascending";
    }
    self.attr("state", state);
    self.html(txt);

推荐答案

您错过了结尾括号}）;

并将sort_btn实施移出plot.call

and move sort_btn implementation out of plot.call

应修正更多地点。

更新小提琴

updated fiddle

plot.call(chart, {
          data: data,
          axis:{
            x: xAxis,
            y: yAxis
          },
          gridlines: yGridlines
        }); 
var sort_btn = document.getElementById('sort')
sort_btn.on("click", function(){
var self = d3.select(this);
var ascending = function(a,b){
        return a.value - b.value;
};
var descending = function(a,b){
        return b.value - a.value;
}
var state = +self.attr("state");
var txt = "Sort data: ";
if(state === 0){
        data.sort(ascending);
        state = 1;
        txt += "descending";
} else if(state === 1){
        data.sort(descending);
        state = 0;
        txt += "ascending";
}
self.attr("state", state);
self.html(txt);

});

这篇关于排序D3中的条形图不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！