make zoom using nvd3

Question

I need make zoom in graphic. I am using angular js and nvd3. this is a part of my Code, html and angular module:

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>

The graphic is ok, but I need make zoom over the graphic. I've seen that D3 is possible, but not if you can with equally nvd3

Answer 1

Try to use a lineWithFocusChart instead of lineChart and then add this options to your chart:

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