Ability to zoom chart

[dev-tim]

Are you going to add some zoom/pan features to nvd3, or there is a way how I can add this features to existing models?

[DavidSouther]

The fisheye charts might do something like this - could you be a bit more explicit?

Perhaps also Line With Focus? http://nvd3.org/examples/lineWithFocus.html

[neilhwatson]

Good examples: http://www.highcharts.com/demo/scatter http://www.highcharts.com/demo/line-time-series http://www.highcharts.com/demo/combo-dual-axes

[DavidSouther]

Ah, the drag-to-zoom functionality. Lemme get back to you on that.

[Siva-Siva]

http://nvd3.org/examples/lineWithFocus.html , Is this something you were looking for?

[dev-tim]

Nope, in this case we scale for only for one dimention. I agree with David, It would be good to rescale all the the components of the graph to enable zooming functionality.

[guerler]

This might be a workaround: http://stackoverflow.com/questions/13196545/is-it-possible-to-have-zooming-option-in-nvd3-charts-as-like-in-highcharts

[rorlig1]

Any update on ability to pan/zoom a graph - particularly bar graph. e.g. http://bl.ocks.org/mbostock/3892919.

[Vineeth-Mohan]

I am also looking for the same. This is exactly what i am looking for - http://www.highcharts.com/demo/line-time-series

[liquidpele]

The blocks example there is pretty cool... something to look into. Keeping marked as Feature.

[Untit1ed]

+1. Really need this feature for every graph.

[Vineeth-Mohan]

@DavidSouther -Kindly let us know the plan to go ahead for this plan. I badly need this one and moving to some other charting library just for this would be hard to implement.

[DavidSouther]

@liquidpele drawing your attention to this.

[liquidpele]

@Vineeth-Mohan David isn't working for novus anymore, so I'm doubtful he'll want to invest the time ;)

Regarding this feature (http://bl.ocks.org/mbostock/3892919) it's a cool feature, something I could look into at some point for the scatter chart at least... however it doesn't seem like it makes as much sense for other charts. Regardless, I probably wouldn't work on it for a while, so if you need it soon I suggest you fork the project and have a go at! Be sure to send us a pull request if you get it working so we can merge the new feature back in :)

[Vineeth-Mohan]

@liquidpele - Sure , i will give a shot. I am not very familiar to D3 , if i get stuck anywhere i will get back to you. If there is any pointers from NvD3 , on where to star , that would be great

[PBrockmann]

nvd3 would gain a lot to get a zoom feature on axis, single or both. Look at: http://jsfiddle.net/PBrockmann/oh7wjs45/ same as http://bl.ocks.org/jgbos/9752277, just added changes of cursor to col-resize and row-resize when mouse is over an axis.

[liquidpele]

Oh cool, thanks for the extra examples :)

[sudotliu]

Any guess on when this might be implemented?

[liquidpele]

Well, I'm not working on it so unless someone else is then it'll be a while ;).

If anyone does it be sure to send us a pull request!

[jaypinho]

Oddly, it looks like this is already implemented in the scatterplot example on the NvD3 page: http://nvd3.org/livecode/index.html#codemirrorNav. There's a "Magnify" circle you can click on to achieve something like this effect; however I'm unclear as to how this was implemented. Any ideas?

[liquidpele]

Yea, that chart is using a very old version of nvd3 that had the fisheye functionality:

https://github.com/d3/d3-plugins/tree/master/fisheye

That was removed though because it was a poor implementation of zoom for the type of charts nvd3 has.

[jaypinho]

Got it. Thanks!

[DmitryEfimenko]

+1

[liquidpele]

To be clear, this is not a very high priority, so if someone wants to take it on send us a pull request! :)

[vshankaa]

+1

[davidgfnet]

This would be indeed a great feature

[Vmyamoto]

@davidgfnet i buy Whatsapp for Pidgin Windows. I pay 2 dolar but dont works. "Serve closed" You can help-me?

[phazei]

They're doing it somehow here: http://krispo.github.io/angular-nvd3/#/stackedAreaChart

[arturaugusto]

Based on this commit: https://github.com/krispo/angular-nvd3/commit/56e4e49e894671d8302b6fed2958994b858e3721 from https://github.com/krispo/angular-nvd3, I created a function that enable basic zoom ability on a existing chart.

Maybe someone more familiar with nvd3 core could incorporate it on the library.

Tested on scatterChart

var enableZoom = function(chart) {
  var scope = {
    chart: chart,
    svg: d3.select(chart.container)
  };

  var fixDomain, zoomed, unzoomed;

  var xScale = scope.chart.xAxis.scale();
  var yScale = scope.chart.yAxis.scale();
  var xDomain = scope.chart.xDomain || xScale.domain;
  var yDomain = scope.chart.yDomain || yScale.domain;
  var x_boundary = xScale.domain().slice();
  var y_boundary = yScale.domain().slice();
  var scaleExtent = [1, 10];

  var scale = 1;

  // create d3 zoom handler
  var d3zoom = d3.behavior.zoom();

  // ensure nice axis
  xScale.nice();
  yScale.nice();

  // fix domain
  fixDomain = function (domain, boundary) {
      domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1] / scaleExtent[1]);
      domain[1] = Math.max(boundary[0] + boundary[1] / scaleExtent[1], Math.min(domain[1], boundary[1]));
      return domain;
  };
  // zoom event handler
  zoomed = function () {
    xDomain(fixDomain(xScale.domain(), x_boundary));
    yDomain(fixDomain(yScale.domain(), y_boundary));
    scope.chart.update();
  };

  // unzoomed event handler
  unzoomed = function () {
    xDomain(x_boundary);
    yDomain(y_boundary);
    d3zoom.scale(1);
    d3zoom.translate([0, 0]);
    scope.chart.update();
  };

  // initialize
  d3zoom.x(xScale)
      .y(yScale)
      .scaleExtent(scaleExtent)
      .on('zoom', zoomed);
  scope.svg.call(d3zoom);
}

[imbolo]

I created a PR #1630 to support highcharts style zooming opeartion just now.

[mafar]

When its going to be merged ? Waiting for release

[jesusvallez]

+1

[djvdorp]

+1

[Kyeongan]

👍

[liquidpele]

PR #1630 has conflicts and cannot currently be merged...

[dm89]

@arturaugusto , @liquidpele so we have to add the code above into the source file of nvd3 models to get the zoom?

[someJ]

PR #1630 breaks, for example, the focus chart as it currently exists.

[dm89]

@someJ How can I enable/use this feature on scatter chart? - there is no such focus feature for scatter chart.

[jonathan-kosgei]

Is this implemented?

[djvdorp]

Any update here?