I searched for other relevant questions, but either by way of me being new to D3 or just rusty as a coder, I can not figure this out.

I've got a graph and I want to be able to zoom in by scrolling the mouse wheel only on the a-axis and the data. Right now, I have the whole graph zooming on the roll of the mouse wheel opposed to just the x-axis.

Edit: This is my end goal, but perhaps with zoom in/out limits (One thing at a time though):

Looks like there is code from that example posted here: .html

graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

I've dropped my code thus far here: /

Any insights or direction is appreciated.

I searched for other relevant questions, but either by way of me being new to D3 or just rusty as a coder, I can not figure this out.

I've got a graph and I want to be able to zoom in by scrolling the mouse wheel only on the a-axis and the data. Right now, I have the whole graph zooming on the roll of the mouse wheel opposed to just the x-axis.

Edit: This is my end goal, but perhaps with zoom in/out limits (One thing at a time though): http://mbostock.github./d3/talk/20111018/#15

Looks like there is code from that example posted here: https://github./mbostock/d3/blob/master/examples/zoom-pan/zoom-pan-transform.html

graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

I've dropped my code thus far here: http://jsfiddle/toddsherman/x3uWK/

Any insights or direction is appreciated.

• javascript
• graph
• svg
• d3.js
• visualization

Share Improve this question Follow edited Nov 27, 2012 at 3:04 Todd Sherman asked Nov 25, 2012 at 17:10 Todd ShermanTodd Sherman 18311 gold badge22 silver badges77 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Part of answer, in the jsfiddle given as reference in source, there is :

chart.select(".xaxis").call(xAxis);
chart.select(".yaxis").call(yAxis);

which refers to something that may be interesting to you :

xAxis = d3.svg.axis().scale(x);
yAxis = d3.svg.axis().scale(y).orient("left");

with x and y which seems to be scaling functions :

var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);

var y = d3.scale.linear()
    .domain([0, max_val])
    .range([graph_height, 0]);

Also, there is a different transformation in the zoom function :

chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");

The translate argument is only the X axis and a 0 value for the Y axis. The scale argument ins only the X axis and a 1 value for the Y axis.

That said, i'm not really sure how to help more