Có thể có tùy chọn phóng to trong biểu đồ NVD3 như trong Highcharts không?

Question

Gần đây tôi đã bắt đầu sử dụng biểu đồ NVD3 và muốn có tùy chọn phóng to như Highcharts. Có thể không?

Answer 1

Có một ví dụ "Biểu đồ đường có trình xem tìm kiếm" sử dụng nv.models.lineWithFocusChart(). Loại biểu đồ này thể thao thêm "mini bản đồ" bên dưới biểu đồ chính mà bạn có thể sử dụng để phóng to và pan bảng xếp hạng:

Xem: Line Chart with View Finder

Answer 2

Bạn có thể áp dụng chức năng này để biểu đồ nvd3 của bạn. Nó không mang lại một hộp có thể kéo để hỗ trợ thu phóng như trong Highcharts nhưng nó cho phép phóng to bằng cách cuộn chuột như được hiển thị ở đây: pan+zoom example. Bạn sẽ phải loại bỏ các chuyển tiếp/sự chậm trễ từ nvd3 để đạt được độ phóng đại trơn tru. Bây giờ, bạn có thể phải làm điều này bằng tay bằng cách thay đổi tệp nguồn nvd3. Có một cuộc thảo luận về điều đó here.

Đây là một 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 
});