Highcharts'taki gibi NVD3 grafiklerinde yakınlaştırma seçeneğine sahip olmak mümkün mü?

Question

Son zamanlarda NVD3 grafiklerini kullanmaya başladım ve Highcharts gibi yakınlaştırma seçeneklerine sahip olmayı seviyorum. Mümkün mü?

Answer 1

nv.models.lineWithFocusChart() kullanan bir "Çizgi Bulucu ile Çizgi Grafik" var. Bu grafik türü, yakınlaştırmak için kullanabilir ve grafiği kaydırabilirsiniz ana grafiğinin altında ek bir "mini harita" spor:

Bkz: Line Chart with View Finder

Answer 2

Sen nvd3 grafiğe bu işlevi geçerli olabilir. Highcharts'da olduğu gibi yakınlaştırmaya yardımcı olmak için sürüklenebilir bir kutu oluşturmaz ancak burada gösterildiği gibi fare kaydırma ile yakınlaştırmaya izin verir: pan+zoom example. Pürüzsüz yakınlaştırma elde etmek için nvd3'teki geçişleri/gecikmeleri kaldırmanız gerekecektir. Şimdilik, bunu nvd3 kaynak dosyasını değiştirerek elle yapmanız gerekebilir. Bu konuda here bir tartışma var. Bir 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 
});