Javascript D3中的排序条形图不工作

我已经在D3中创建了一个条形图，在选择单选按钮时会显示条形图，我想按升序或降序排序。当点击按钮时，它没有排序，因此我不知道有什么问题，但如果您有任何帮助，我们将不胜感激：

[添加排序之前]

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

---

您错过了结尾括号（strong>）

并将sort_btn实现移出plot.call

为了使分类工作顺利进行，你应该固定更多的位置

---

在尝试访问变量之前，您应该获取该按钮并保存到该变量。在排序之前添加下一行-

var sort\u btn=document.getElementById（'sort'）

（'click'你能告诉我一些想法吗，因为我是D3新手。我没有仔细研究你的逻辑，我能想到的排序是每次你点击排序按钮，你就对数据进行排序并重新绘制图表。我也不是D3方面的专家，也许还有更好的解决方案：）

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

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

});