在nvd3图表上排序栏

时间:2014-09-30 06:53:34

标签: javascript d3.js nvd3.js

是否有一种简单的方法可以对 Nvd3 discreteBarChart Horizo​​ntalBarChart 吧(升序或降序)进行排序>。 我认为应该将一个函数添加到主lib(Nvd3)中,以便可以使用该选项:

.sortAscending(true) //Used for ascending bars according to their value
  or
.sortDescending(true)  //Used for descending bars according to their value

1 个答案:

答案 0 :(得分:1)

尝试这个,我在我的应用程序中实现,在返回图表对象

之前将其包含在addGraph方法中
var parent = $('svg').parent().attr("id");

//为你的DIV添加一个按钮并提供onclick evet功能

d3.select("#"+parent).append('a').attr('href',"javascript:void(0)")
 .text('Sort').on("click", sortBars).html('Sort');

//排序功能

var sortOrder;
var sortBars = function(){

    if( !sortOrder || sortOrder == null)
        sortOrder = true;
    else sortOrder = false;
        var historicalBarChart11 ;
    var data1 = JSON.parse(JSON.stringify(data));//cloning object
    sortdata = data1[0].values;
        sortdata.sort(function(a,b){
        if(sortOrder)
            return a["value"]-b["value"];//[1];
        else
            return b.value-a.value;//[1];
        });
        for(var i=0;i<sortdata.length;i++){
            data1[0]["values"][i] = sortdata[i];
        }
        d3.select('svg').datum(data1).transition().duration(500).call(chart);
    }