javascript - 如何在 nvd3 中对栏进行排序？

Question

我在我的应用程序中使用 nvd3 多条形图。它工作正常。在这里，我需要根据值对条形图进行排序(我的意思是按升序/降序方式)。 nvd3 中是否有可用于排序的内置函数？或者我怎样才能实现排序。

nv.addGraph(function() {

  var chart;
  chart = nv.models.multiBarChart()
    .margin({bottom: 100})
    .transitionDuration(300);

  chart.options( {delay: 1200});

  chart.multibar
    .hideable(false);

  chart.xAxis
      //.axisLabel("Modules")
      .rotateLabels(45);

  chart.yAxis
   .tickFormat(function(d) { return d + "%"; });


  d3.select('#' + "barChart" + ' svg')
      .datum(data)
     .call(chart);

  nv.utils.windowResize(chart.update);

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});

Answer 1

为了在 nvd3 中对条形图进行排序，我采用了这种方法。首先，我尝试使用未排序的数据，手动对数据进行排序并检查它是否正常工作。之后，我使用排序函数对数据进行动态排序。

function iniChart(data){
  nv.addGraph(function() {  
  var chart;
  chart = nv.models.multiBarChart()
        .margin({bottom: 100})
        .transitionDuration(300);

      chart.options( {delay: 1200});
      chart = nv.models.multiBarChart().stacked(true).showControls(false);  
      chart.multibar
        .hideable(false);

      chart.xAxis
          .axisLabel("Modules")
          .rotateLabels(45);

      chart.yAxis
       .tickFormat(function(d) { return d + "%"; });

      d3.select('#' + "barChart" + ' svg')
          .datum(data)
         .call(chart);

      nv.utils.windowResize(chart.update);

      chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

      return chart;
  });
 }

 iniChart(data);

 function sortedChart(){
data.forEach(function(d){ if(d.key=="Completion"){
    d.values.sort(function(a,b){
         return a.y - b.y;
        })
} })

data.forEach(function(d){ if(d.key=="NonCompletion"){
 d.values.sort(function(a,b){       
         return b.y - a.y;
        })
} })

console.log("Check Data::"+JSON.stringify(data))
     iniChart(data);
 }