使用 nvd3 进行缩放

Question

我需要放大图片。我正在使用 angular js 和 nvd3。这是我的代码的一部分，html 和 angular 模块：

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

app.controller('daCtrl', function($scope) {
  
$scope.graphic = [{key: "a", values: [[243434, 1],[363352, 2],...]}, [[243434, 1],[363352, 2],...]},... ];

  $scope.options = {
                    chart: {
                        type: "lineChart",
                        height: 450,
                        margin : {
                            top: 20,
                            right: 20,
                            bottom: 60,
                            left: 65
                        },
                        x: function(d){ return d[0]; },
                        y: function(d){ return d[1]/100; },
                        average: function(d) { return d.mean/100; },

                        color: d3.scale.category10().range(),
                        transitionDuration: 300,
                        useInteractiveGuideline: true,
                        clipVoronoi: false,

                        xAxis: {
                            axisLabel: 'Date',
                            tickFormat: function(d) {
                                return d3.time.format('%m/%d/%y')(new Date(d));
                            }
                        },

                        yAxis: {
                            axisLabel: 'Measure',
                            tickFormat: function(d){
                                return d3.format('.02f')(d);
                            },
                            axisLabelDistance: 20,
                            showMaxMin: true,
                            staggerLabels: true
                        }

                    }
                };
  });

<link rel="stylesheet" type="text/css" href="../bower_components/nvd3/nv.d3.css">

<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/nvd3/nv.d3.js"></script>
<script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>

<nvd3 options="options" data="graphic"></nvd3>

图形没问题，但我需要放大图形。我已经看到 D3 是可能的，但如果你同样可以 nvd3

Answer 1

我使用 Dygraphs angularjs 指令将 nvd3 更改为 dygraph (https://twittstrap.com/dygraphs-angularjs-directive/)

现在（网站同例）

HTML:

<head>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/dygraphs/dygraph-combined.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/moment/moment.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/angular-dygraphs/src/angular-dygraphs.js"></script>

    <!--<link rel="stylesheet" type="text/css" href="bower_components/angular-dygraphs/demo/demo.css"/>-->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="demoApp">
<div ng-controller="DemoCtrl">
    <ng-dygraphs data="graph.data" options="graph.options"  legend="graph.legend"></ng-dygraphs>
<div>
</body>

js:

var example = angular.module('demoApp', [
        "angular-dygraphs"
    ]);

    demoApp.controller('DemoCtrl', function ($scope) {
        $scope.graph = {
            data: [
            ],
            options: {
                labels: ["x", "A", "B"]
            },
            legend: {
                series: {
                    A: {
                        label: "Series A"
                    },
                    B: {
                        label: "Series B",
                        format: 3
                    }
                }
            }
        };

        var base_time = Date.parse("2008/07/01");
        var num = 24 * 0.25 * 365;
        for (var i = 0; i < num; i++) {
            $scope.graph.data.push([ new Date(base_time + i * 3600 * 1000),
                i + 50 * (i % 60),        // line
                i * (num - i) * 4.0 / num  // parabola
            ]);
        }
       
    });

Answer 2

我知道我迟到了两年，但放大 angularjs 完全是一回事，只需添加如下内容：

zoom: {
    enabled: true,
    scaleExtent: [1, 10000],
    useFixedDomain: false,
    useNiceScale: false,
    horizontalOff: false,
    verticalOff: true,
    unzoomEventType: "dblclick.zoom"
}

到您的图表选项

Answer 3

尝试使用 lineWithFocusChart 而不是 lineChart，然后将此选项添加到您的图表：

                    x2Axis: {
                        tickFormat: function (d) {
                             return d3.time.format('%m/%d/%y')(new Date(d));
                        }
                    },
                    y2Axis: {
                        tickFormat: function(d){
                                return d3.format('.02f')(d);
                            }
                    }

使用 nvd3 进行缩放

make zoom using nvd3

angularjs

nvd3.js

angularjs-nvd3-directives