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。

那就是说，我不确定如何帮助更多

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

1 个答案: