當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


d3.js zoom.on()用法及代碼示例


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> 

輸出:




相關用法


注:本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 D3.js zoom.on() Function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。