Skip to content

nvd3 zoom feature #2226

@sandeep-staple

Description

@sandeep-staple

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions