4

我搜索了其他相关问题，但无论是因为我是 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/

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

4

1 回答 1

3

部分答案，在源代码中作为参考给出的 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 值。

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

于 2012-11-26T01:32:36.373 回答