javascript - D3.js:使用鼠标滚轮滚动缩放 x 轴和数据

Question

我搜索了其他相关问题，但由于我是 D3 的新手，或者只是作为一名编码员生疏，我无法解决这个问题。

我有一个图表，我希望能够通过仅在 a 轴和数据上滚动鼠标滚轮来放大。现在，整个图形在鼠标滚轮的滚动上缩放，而不仅仅是 x 轴。

编辑:这是我的最终目标，但可能有放大/缩小限制(尽管一次只能做一件事):http://mbostock.github.com/d3/talk/20111018/#15

看起来这里发布了该示例的代码: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/

任何见解或方向表示赞赏。

Answer 1

部分答案，在源代码中作为引用给出的jsfiddle中，有:

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

它指的是你可能感兴趣的东西:

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

x 和 y 似乎是缩放函数:

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]);

此外，缩放功能还有不同的变换:

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

translate 参数只有 X 轴和 Y 轴的 0 值。scale 参数仅包含 X 轴和 Y 轴的 1 值。

也就是说，我不太确定如何提供更多帮助