angularjs - Angular NVD3：在stackedAreaChart中设置一个yDomain

Question

我在用着：

• 角 v.1.3
• 角-nvd3 v.1.0.5
• D3 v.3.5.16

我尝试在 Y 轴上添加具有特定域的 Stacket面积图，我对结果感到满意，因为 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

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

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

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

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

结果：