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/ 欢迎提供任何见解或指引。

- Todd Sherman

Answer 1

在源代码中，参考jsfiddle的一部分答案如下：

在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)");

翻译参数仅限于X轴，Y轴的值为0。 比例参数仅限于X轴，Y轴的值为1。

话虽如此，我不太确定如何提供更多帮助。

- y_nk

---

这很有建设性 - 我今晚会深入研究并看看我能得出什么。感谢您的意见。我会告诉您我的发现。 - Todd Sherman

好的，还没有成功。我认为你所提到的缩放函数只是指轴比例尺的设置方式，而不是主动缩放轴/数据的方式。谢谢。 - Todd Sherman

转换属性的参数怎么样？ - y_nk

是的，我认为关键可能在于声明与实际图形无关但可以进行缩放的“某些东西”。在检查此示例链接的源代码时，他们声明了_svg_和_rect_，而我只使用_graph_，这让我相信我需要以某种方式将我的方法分隔开来，以便独立地缩放x轴。感谢您的参与。 - Todd Sherman