Mike Bostock（D3js的創建者）如何使用pan＆zoom示例工作？

我有一個很難理解這個例子： https://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45 Mike Bostock（D3js的創建者）如何使用pan＆zoom示例工作？

我瞭解的一般概念，圖中的所有的點都放入svgg - 元素，這是非常有用的，因爲現在你可以應用轉換在小組中並且具有相應的所有分數。這將轉換這些點所在的整個座標系。但這對於平移所傳遞的鼠標座標無關緊要，因爲這些座標來自svg中不可見的rect，該座標不會被轉換。

我不明白這是：

svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all") 
    .call(d3.zoom() 
     .scaleExtent([1/2, 4]) 
     .on("zoom", zoomed)); 

function zoomed() { 
    g.attr("transform", d3.event.transform); 
}

是在.CALL默認svg -rectangle的成員函數？它在這裏做什麼？ And d3.zoom是根據文檔的「行爲」。這意味着什麼？這兩者之間的耦合是如何工作的？功能.on的用途是什麼，它通過'zoom'？我假設它是用於將元素上的瀏覽器事件傳遞給事件處理程序zoomed。但是，如何在這裏處理平移？這僅僅是我還是將它作爲d3.zoom()的參數.scaleExtent和.on更有意義？

來源

2017-08-09 Plumpie

該rect 收到的瀏覽器縮放事件。

的放大功能應用轉換到摹元素

注意我們有RECT的摹否則RECT他們該不會接收事件背後後。

svg - g - rect

來源

2017-08-09 14:11:03

Mike Bostock（D3js的創建者）如何使用pan＆zoom示例工作？

回答

相關問題