È possibile avere l'opzione di zoom nei grafici NVD3 come in Highcharts?

Question

Recentemente ho iniziato a utilizzare grafici NVD3 e mi piace avere l'opzione di zoom come Highcharts. È possibile?

Answer 1

C'è un esempio di "Grafico a linee con View Finder" che utilizza nv.models.lineWithFocusChart(). Questo tipo di grafico mette in mostra un ulteriore "mini mappa" sotto il grafico principale che è possibile utilizzare per ingrandire e scorrere la carta:

See: Line Chart with View Finder

Answer 2

Si potrebbe applicare questa funzione per il grafico nvd3. Non produce una finestra trascinabile per agevolare lo zoom come in Highcharts ma consente lo zoom con il mouse come mostrato qui: pan+zoom example. Dovrai rimuovere le transizioni/i ritardi da nvd3 per ottenere uno zoom fluido. Per ora, potrebbe essere necessario farlo manualmente modificando il file sorgente nvd3. C'è una discussione su questo here.

Questo è un jsfiddle.

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(); 

// 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 
svg.call(d3zoom).on('dblclick.zoom', unzoomed); 
}; 

// here chart is your nvd3 model 
addZoom({ 
    xAxis : chart.xAxis, 
    yAxis : chart.yAxis, 
    yDomain: chart.yDomain, 
    xDomain: chart.xDomain, 
    redraw : function() { chart.update() }, 
    svg : svg 
});