Angular NVD3：在 stackedAreaChart 中设置一个 yDomain

Question

我正在使用：

Angular v.1.3
Angular-nvd3 v.1.0.5
D3 v.3.5.16

我尝试添加一个 Stacket Area Chart，在 Y 轴 特定域 我对结果很满意，因为yDomain 和图表工作正常，但我有一个小设计问题需要解决...

Y 轴没有定义域：

工作正常，没有任何问题，但不是我想要的：

在 Y 轴上有域

根据上一种情况，我现在在 Y 轴上添加了一个域：

 var maxValue, minValue, margin;
  
 maxValue = Math.max.apply(Math,data[0].values.map(function(o){return o[1];}));
 minValue = Math.min.apply(Math,data[0].values.map(function(o){return o[1];}));
 margin = 0.1 * (maxValue - minValue);
 options.chart.yDomain = [minValue, maxValue+margin];

现在正是我想要的！我添加了一个域...但是我不明白为什么X轴和图表是反手...

如何解决这个设计问题？为什么会这样？

谢谢！

图表属性：

"chart": {
    "type": "stackedAreaChart",
    "height": 450,
    "margin": {
      "top": 20,
      "right": 20,
      "bottom": 20,
      "left": 40
    },
    "x": function (d) {
      return d[0];
    },
    "y": function (d) {
      return d[1];
    },
    "useVoronoi": false,
    "clipEdge": true,
    "showControls": false,
    "duration": 100,
    "useInteractiveGuideline": true,
    "xAxis": {
      "tickFormat": function (d) {
        return d3.time.format("%H:%M")(new Date(d));
      }
    },
    "yAxis": {
      "tickFormat": function (d) {
        return d3.format(",.2f")(d);
      },
    },
    "zoom": {
      "enabled": false,
      "scaleExtent": [1, 10],
      "useFixedDomain": true,
      "useNiceScale": false,
      "horizontalOff": true,
      "verticalOff": true,
      "unzoomEventType": "dblclick.zoom"
    }
  }

Answer 1

最后我解决了这个问题，将图表类型从 stackedAreaChart 更改为 lineChart。

"chart": {
    "type": "lineChart",
    // ... All the other options are the same

之后，我们唯一需要做的改变就是在data对象中添加area:true，我们得到了相同的图表这个错误解决了。

data = [{
          color:"#e35b5a",
          key:"A",
          values:values,
          area: true //Add this line in the data object
       }];

结果：

Angular NVD3：在 stackedAreaChart 中设置一个 yDomain

Angular NVD3: set a yDomain in stackedAreaChart

angularjs

d3.js

nvd3.js

angular-nvd3

Y 轴没有定义域：

在 Y 轴上有域

图表属性：