Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nvd3 zoom feature #2226

Open
sandeep-staple opened this issue Dec 14, 2020 · 0 comments
Open

nvd3 zoom feature #2226

sandeep-staple opened this issue Dec 14, 2020 · 0 comments

Comments

@sandeep-staple
Copy link

sandeep-staple commented 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant