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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。