面积图上的 nvd3 方向轴

Question

在创建 nvd3 面积图时，有一些方法可以改变轴的方向，这意味着从上到下开始，这对非面积图很有效，当我尝试对面积系列这样做时，数据点位置很好，问题是渲染区域仍然保持在同一个方向上，我的意思是，从下到上。

有办法解决这个问题吗？

我在 nvd3 初始化时使用 angular-nvd3 和以下选项：

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {

    $scope.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            yDomain: [100, 0],
            x: function(d){ return d.x; },
            y: function(d){ return d.y; },
         }
    };

    $scope.data = [{
         "area": true,
         "values": [
             {
                 "x": 1,
                 "y": 50
             },
             {
                 "x": 2,
                 "y": 55
             },
             {
                 "x": 3,
                 "y": 60
             },
             {
                 "x": 4,
                 "y": 70
             }
          ]
    }];

});

这里有一个 plunker 来说明这个问题。

https://plnkr.co/edit/pXeFbe0w4BK6eGcfyXZ4?p=preview

Answer 1

根据 Github here 上的最新 NVD3 版本，它允许您更改轴的方向。

这是使用计划 NVD3 完成的，不是 ANGULAR NVD3，应该与 angular 中的方法类似。

要更改 xAxis，请尝试：

chart.xAxis.orient('top'); // Its 'bottom' by default

默认情况下，yAxis 设置为 left over here。您有 2 个选项来更改 yAxis 方向：

chart.rightAlignYAxis(true) 或
chart.yAxis.orient('right'); // Its 'left' by default

关于轴的更多信息here

我没有测试过这段代码，不明白为什么它不起作用。

希望对您有所帮助

Answer 2

使用 orient 方法允许您将轴放置在任何您想要的位置（左、右、上、下），但这并不意味着改变轴的绘制方式，只是改变位置而不是方向。

例如，从 100 到 0 而不是 0 到 100。我最终采用 css 方法来制作镜像效果并获得我想要的效果：

.chart {
    transform: rotate(180deg) scaleX(-1); 
}

这将转动图表并使其看起来像我想要的那样，因为绘图是在我最初想要实现的相反方向上进行的。

面积图上的 nvd3 方向轴

nvd3 orientation axis on area chart

javascript

angular

d3.js

nvd3.js

angular-nvd3