反转xAxis for NVD3 MultiBar Chart

时间:2013-12-04 20:13:08

标签: d3.js nvd3.js

如何将xAxis反转为NVD3 MultiBar图表?数据是相同的(除了我必须将values属性的{x:...,y:...}对象转换为堆积区域图表的配对数组。数据也在lineChart上正确显示。

仅供参考,日期数据是从阵列中的最新到最早排序的,但这对时间尺度来说无关紧要,对吗?

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

Stacked Area Chart

MultiBar Chart

1 个答案:

答案 0 :(得分:1)

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

请注意,您将以这种方式失去时间刻度的优势,例如:自动标签格式取决于显示的时间范围。