D3.js中的zoom.on()函數用於為指定的類型名設置事件偵聽器,並返回縮放行為。如果已經為相同類型和名稱注冊了事件偵聽器,則在添加新偵聽器之前,將刪除現有偵聽器。
用法:
zoom.on(typenames[, listener])
參數:該函數接受如上所述和以下描述的單個參數
- typenames:此參數是包含一個或多個用空格分隔的類型名的字符串。
- listener:此參數是可選參數,是一個函數。
返回值:此函數返回縮放行為。
以下示例程序旨在說明D3.js中的zoom.on()函數
範例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.on() Function</h3>
<div id="GFG"></div>
<script>
var svg = d3.select("#GFG")
.append("svg")
.attr("width", 300)
.attr("height", 250)
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
.append("g")
svg
.append("circle")
.attr("cx", 150)
.attr("cy", 125)
.attr("r", 40)
.style("fill", "#dc73ff")
</script>
</center>
</body>
</html>
輸出:
範例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.on() Function</h3>
<div id="GFG"></div>
<script>
var svg = d3.select("#GFG")
.append("svg")
.attr("width", 300)
.attr("height", 250)
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
.append("g")
svg.append("rect")
.attr("id", "shape")
.attr("width", 50)
.attr("height", 33)
.attr("x", 125)
.attr("y", 75)
.style("fill", "green");
</script>
</center>
</body>
</html>
輸出:
相關用法
- PHP imagecreatetruecolor()用法及代碼示例
- p5.js year()用法及代碼示例
- d3.js d3.utcTuesdays()用法及代碼示例
- PHP ImagickDraw getTextAlignment()用法及代碼示例
- PHP Ds\Sequence last()用法及代碼示例
- PHP array_udiff_uassoc()用法及代碼示例
- PHP geoip_continent_code_by_name()用法及代碼示例
- d3.js d3.map.set()用法及代碼示例
- PHP GmagickPixel setcolor()用法及代碼示例
- PHP opendir()用法及代碼示例
- PHP cal_to_jd()用法及代碼示例
- d3.js d3.bisectLeft()用法及代碼示例
- PHP stream_get_transports()用法及代碼示例
- PHP Ds\Deque pop()用法及代碼示例
注:本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 D3.js zoom.on() Function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。