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

我搜索了其他相关问题，但是通过我刚刚接触D3或者只是作为编码器生锈，我无法弄清楚这一点。D3.js：使用鼠标滚轮缩放x轴和数据

我有一个图形，我希望能够通过滚动鼠标滚轮仅在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/

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

来源

2012-11-25 Todd Sherman

部分，在给出源参考的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]);

另外，在缩放f ：

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-26 01:32:36

这是有建设性的 - 今晚我要深入研究这个，看看我想出了什么。感谢您的意见。我会让你知道我弄清楚了什么。 –

好的，还没有运气。我认为那些你称为比例缩放功能的东西，就是轴比例的设置与人们如何主动缩放轴/数据的方式相反。谢谢。 –

转换属性的参数如何？ –

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

回答

相关问题