D3.js NVD3多条形图的反转X轴

D3.js NVD3多条形图的反转X轴,d3.js,nvd3.js,D3.js,Nvd3.js,如何反转NVD3多条形图的X轴?数据是相同的(除了我必须将values属性的{x:…,y:…}对象转换为堆叠面积图的成对数组。数据也正确地显示在折线图上 仅供参考,日期数据在数组中是从最晚到最早排序的,但这对于时间尺度来说并不重要,对吗 // Stacked Area Chart var renderStackedAreaChart = function(data){ var newData = convertData(data); nv.addGraph(function() {

如何反转NVD3多条形图的X轴?数据是相同的(除了我必须将values属性的{x:…,y:…}对象转换为堆叠面积图的成对数组。数据也正确地显示在折线图上

仅供参考,日期数据在数组中是从最晚到最早排序的,但这对于时间尺度来说并不重要,对吗

// Stacked Area Chart
var renderStackedAreaChart = function(data){
  var newData = convertData(data);

  nv.addGraph(function() {
    var chart = nv.models.stackedAreaChart()
      .x(function(d) { return d[0]; })
      .y(function(d) { return d[1]; })
      .clipEdge(true);

    chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });

    chart.yAxis
      .tickFormat(d3.format('$,.2f'));

    d3.select('#graph svg')
      .datum(newData)
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
 });
};

// Stacked MultiBar Chart
var renderStackedMultiBar = function(data) {

  nv.addGraph(function() {
    var chart = nv.models.multiBarChart();

    chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });

    chart.yAxis
      .tickFormat(d3.format('$,.2f'));

    d3.select('#graph svg')
      .datum(data)
         .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });
}


NVD3不支持这一点——您必须修改源代码。一个快速而肮脏的解决方法是(正如您在评论中所建议的那样)使用顺序标度而不是时间标度。这样,您指定为域的值的顺序很重要,您可以简单地以相反的顺序传递它


请注意,这样做会失去时间刻度的优势,例如,根据显示的时间范围自动设置标签格式。

NVD3不支持这一点——您必须修改源代码。谢谢,我认为您是正确的。我认为我对图表的使用不正确,应该使用顺序刻度。我将此作为答案发布或参考。您的图形与俄罗斯国旗相似。感谢您发布答案。我认为使用时间刻度不正确地使用多条形刻度。您实际上想要使用顺序刻度。