Question

我正在使用d3.j，nvd3.js和angular-nvd3指令。我想明确指定x轴的范围，所以即使没有值显示整个间隔（一个很好的例子可能是时间轴-x轴，当我想要显示整个时间段时，让我们说03:00 - 09:00）。
最初我只使用了“lineChart”，并且可以选择指定forceX和forceY图表选项，分别使用x轴和y轴的max和min值数组。现在我切换到“multiChart”（带有两个y轴），此选项似乎不再起作用了。对于y轴，有一个名为yDomain1和yDomain2的替代品，它与forceY完全相同，但xDomain根本不起作用。
我创建了一个Plunker来显示我的问题。这是图表选项'初始化显示：

$scope.xminvalue = -10;
$scope.xmaxvalue = 110;
$scope.options = {
  "chart": {
    "type": "multiChart",
    "height": 450,
    "margin": {
      "top": 20,
      "right": 20,
      "bottom": 40,
      "left": 55
    },
    "useInteractiveGuideline": true,
    "xAxis": {
      "axisLabel": "Time (ms)",
      "showMaxMin": true,
      "height": 60,
      "margin": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "tickSubdivide": 10,
      "tickSize": 2,
      "tickPadding": 2,
      "tickFormat": function(d) {
        return d;
      },
    },
    "yAxis1": {
      "tickFormat": function(d) {
        return d3.format('.01f')(d);
      },
      "axisLabel": "Voltage (v)",
      "axisLabelDistance": -10,
      "showMaxMin": true,
      "height": 60,
      "ticks": null,
      "width": 75,
      "tickValues": null,
    },
    "yAxis2": {
       "tickFormat": function(d) {
         return d3.format('.01f')(d);
       },
       "axisLabel": "Voltage (v)",
       "axisLabelDistance": -10,
       "showMaxMin": true,
       "height": 60,
       "ticks": null,
       "width": 75,
       "tickValues": null,
    },
    "xDomain": [$scope.xminvalue, $scope.xmaxvalue], 
    "xRange": null,
    "yDomain": null,
    "yRange": null,
    "tooltips": true,
  }
};
$scope.data = sinAndCos();

这只是another example与简单的“lineChart”的小型重构（其效果类似于xDomain的魅力）。
将欣赏任何想法/解决方法。

使用d3.js，nvd3.js和angular-nvd3明确指定“multiChart”的x轴的最大/最小值

0 个答案: