Open dev-tim opened 10 years ago
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
Ah, the drag-to-zoom functionality. Lemme get back to you on that.
http://nvd3.org/examples/lineWithFocus.html , Is this something you were looking for?
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.
Any update on ability to pan/zoom a graph - particularly bar graph. e.g. http://bl.ocks.org/mbostock/3892919.
I am also looking for the same. This is exactly what i am looking for - http://www.highcharts.com/demo/line-time-series
The blocks example there is pretty cool... something to look into. Keeping marked as Feature.
+1. Really need this feature for every graph.
@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.
@liquidpele drawing your attention to this.
@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 :)
@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
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.
Oh cool, thanks for the extra examples :)
Any guess on when this might be implemented?
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!
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?
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.
Got it. Thanks!
+1
To be clear, this is not a very high priority, so if someone wants to take it on send us a pull request! :)
+1
This would be indeed a great feature
@davidgfnet i buy Whatsapp for Pidgin Windows. I pay 2 dolar but dont works. "Serve closed" You can help-me?
They're doing it somehow here: http://krispo.github.io/angular-nvd3/#/stackedAreaChart
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);
}
I created a PR #1630 to support highcharts style zooming opeartion just now.
When its going to be merged ? Waiting for release
+1
+1
👍
PR #1630 has conflicts and cannot currently be merged...
@arturaugusto , @liquidpele so we have to add the code above into the source file of nvd3 models to get the zoom?
PR #1630 breaks, for example, the focus chart as it currently exists.
@someJ How can I enable/use this feature on scatter chart? - there is no such focus feature for scatter chart.
Is this implemented?
Any update here?
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?