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屋！