Is it possible to be able to scale in NVD3 graphics, as in Highcharts?

Question

I recently started using NVD3 graphics and would like to be able to scale, such as Highcharts. Is it possible?

Answer 1

There is an example "Line Chart with View Finder" that uses nv.models.lineWithFocusChart() . This type of chart contains an additional “minimap” below the main chart, which you can use to scale and pan the chart:

See: Viewfinder line chart

Answer 2

You can apply this function to nvd3 diagram. It does not provide a draggable window to help scale, as in Highcharts, but allows you to scale with the mouse, as shown here: an example of panning + zooming . You will need to remove transitions / delays from nvd3 in order to achieve smooth scaling. For now, you may need to do this manually by modifying the source nvd3 file. There is a discussion of this here .

Here is the 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 });