#2226·nvd3

nvd3 zoom feature

Author: sandeep-stapleCreated Dec 14, 2020Updated Dec 14, 2020

Hello There, I have created a graph using nvd3 but now I want to add zoom feature but zoom feature not work perfectly details given below:

jsfiddle link for zoom feature http://jsfiddle.net/guerler/cqNkB/

currently I am using addZoom function from jsfiddle but in my chart parameter are xAxis(date) and yAxis (number). When I try with number and date, its zoomed only with number

// add zoom handler
function addZoom(options) {
 // scaleExtent
    var scaleExtent = 10;
    
    // parameters
    var yAxis       = options.yAxis;
    var xAxis       = options.xAxis;
    var xDomain     = options.xDomain || xAxis.scale().domain;
    var yDomain     = options.yDomain || yAxis.scale().domain;
    var redraw      = options.redraw;
    var svg         = options.svg;
    var discrete    = options.discrete;
    
    // scales
    var xScale = xAxis.scale();
    var yScale = yAxis.scale();
    
    // min/max boundaries
    var x_boundary = xScale.domain().slice();
    var y_boundary = yScale.domain().slice();
    
    // create d3 zoom handler
    var d3zoom = d3.behavior.zoom();
    
    // ensure nice axis
    xScale.nice();
    yScale.nice();
       
    // fix domain
    function fixDomain(domain, boundary) {
        if (discrete) {
            domain[0] = parseInt(domain[0]);
            domain[1] = parseInt(domain[1]);
        }
        domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent);
        domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1]));
        return domain;
    };
    
    // zoom event handler
    function zoomed() {
        yDomain(fixDomain(yScale.domain(), y_boundary));
        xDomain(fixDomain(xScale.domain(), x_boundary));
        redraw();
    };

    // zoom event handler
    function unzoomed() {
        xDomain(x_boundary);
        yDomain(y_boundary);
        redraw();
        d3zoom.scale(1);
        d3zoom.translate([0,0]);
    };
    
    // initialize wrapper
    d3zoom.x(xScale)
          .y(yScale)
          .scaleExtent([1, scaleExtent])
          .on('zoom', zoomed);
          
    // add handler
    d3.select('#chart').call(d3zoom).on('dblclick.zoom', unzoomed);
};
        
        // add zoom
        addZoom({
            xAxis  : chart.xAxis,
            yAxis  : chart.yAxis,
            yDomain: chart.yDomain,
            xDomain: chart.xDomain,
            redraw : function() { chart.update() },
            svg    : svg
        }); 

here in my chart image nvd3-bar_charts