HighchartsのようにNVD3チャートでズームオプションを使用することはできますか？

Question

最近NVD3チャートを使い始めました。ハイチャートのようなズームオプションが好きです。出来ますか？

Answer 1

nv.models.lineWithFocusChart()を使用する「ビューファインダを持つ折れ線グラフ」の例があります。このチャートタイプのスポーツをあなたはズームとチャートをパンするために使用することができ、メインチャートの下に追加の「ミニマップ」：

参照：Line Chart with View Finder

Answer 2

あなたのnvd3チャートにこの機能を適用することができます。 Highchartsのようにズームを補助するためのドラッグ可能なボックスはありませんが、ここに示すようにマウススクロールによるズームが可能です：pan+zoom example。スムーズなズームを実現するには、nvd3からトランジション/ディレイを削除する必要があります。今のところ、nvd3ソースファイルを変更して手動で行う必要があります。それについての議論がありますhere。

ここには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 
});