nvd3设置比例从大到小答案

【问题标题】：nvd3 set scale from big to smallnvd3设置比例从大到小
【发布时间】：2014-01-15 12:52:10
【问题描述】：

我有一个简单的折线图，其中 Y 值介于 0-100 之间。我想反转 Y 范围以改为 100-0。图代码如下：

    nv.addGraph(function() {
      var values = that.getGraphValues();
      console.log(values);
      var chart = nv.models.lineChart()
          .forceY([100, 1]);

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

      chart.yAxis
          .axisLabel('Ranking')
          .tickFormat(d3.format(',r'));

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

      nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

      return chart;
    });

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

您需要明确设置图形的域。在 D3 术语中，“域”是数据的预期范围。如果不自己设置，则计算为[minValue, maxValue]。但您可以将其显式设置为任何值，即使第一个数字大于第二个数字。

var chart = nv.models.lineChart()
            .yDomain([100,0]);

【讨论】：

P.S. .forceX([numbers]) 和 forceY([numbers]) 强制域 include 那些可用于扩展域的数字，但它们的顺序被忽略 - 程序仅在添加这些数字后计算最大值和最小值从数据中将数字添加到数字数组的末尾。
据我了解， forceX([numbers]) 仍然不会颠倒顺序。不过试过了，是的，它仍然没有颠倒顺序。
@AceDimasuhid 没错。我刚刚提到它是为了解释为什么这种方法没有起作用。直接设置 y 域应该可以解决问题。

【解决方案2】：

如果您碰巧使用Angular NVD3 包装器，设置自定义消息的方法是通过图表选项，简单地说：

$scope.options = {
  chart: {
  ...
  yDomain: [100, 1],
  ...
  }
};

【讨论】：