D3.js:用鼠标滚轮缩放x轴和数据 [英] D3.js: Zooming the x-axis and data with mouse wheel scroll
问题描述
我搜索其他相关问题,但是通过我是D3的新手,或者作为编码器生锈,我不能想出来。
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.
我有一个图形,我想通过滚动鼠标滚轮只能在a轴和数据放大。现在,我使整个图形放大鼠标滚轮的滚动,而不是只显示x轴。
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.
编辑:这是我的最终目标,放大/缩小限制(一次只有一件事): http:// mbostock。 github.com/d3/talk/20111018/#15
This is my end goal, but perhaps with zoom in/out limits (One thing at a time though): http://mbostock.github.com/d3/talk/20111018/#15
看起来像这个例子中的代码: https://github.com/mbostock/d3/blob/master/examples /zoom-pan/zoom-pan-transform.html
Looks like there is code from that example posted here: https://github.com/mbostock/d3/blob/master/examples/zoom-pan/zoom-pan-transform.html
graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
我已经把代码放在这里: http://jsfiddle.net/toddsherman/x3uWK/
I've dropped my code thus far here: http://jsfiddle.net/toddsherman/x3uWK/
任何见解或指导。
推荐答案
部分答案,在源代码中作为参考给出的jsfiddle中有:
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");
与x和y似乎是缩放函数:
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)");
translate参数仅为X轴,Y轴为0值。
scale参数只包含X轴,1个值为Y轴。
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
这篇关于D3.js:用鼠标滚轮缩放x轴和数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!