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軸和數據

回答

相關問題