D3.js：使用鼠标滚轮滚动缩放 x 轴和数据答案

【问题标题】：D3.js: Zooming the x-axis and data with mouse wheel scrollD3.js：使用鼠标滚轮滚动缩放 x 轴和数据
【发布时间】：2012-11-13 05:59:25
【问题描述】：

我搜索了其他相关问题，但由于我是 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/

感谢任何见解或方向。

【问题讨论】：

标签： javascript graph svg d3.js visualization

【解决方案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 值。

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

【讨论】：

这是建设性的——我今晚要深入研究一下，看看我想出了什么。感谢您的输入。我会让你知道我的发现。
好的，还没有运气。我认为您称为缩放函数的那些东西就是轴比例的设置方式，与主动缩放轴/数据的方式相反。谢谢。
transform属性的参数如何？
是的，关键可能在于以某种方式声明 something 独立于可缩放的实际图形。在检查这个例子的来源link 他们有 svg 和 rect 声明，我只使用 graph 这让我相信我需要以某种方式划分我如何做到这一点，以便独立缩放 x 轴。感谢参与。