D3.js zoom.on()函数

D3.js中的zoom.on()函数用于为指定的类型名设置事件侦听器并返回缩放行为。如果已经为相同类型和名称注册了事件侦听器，则在添加新侦听器之前删除现有侦听器。

句法：

zoom.on(typenames[, listener])

参数：此函数接受如上所述和如下所述的单个参数

• typenames：此参数是包含一个或多个由空格分隔的类型名的字符串。
• listener：该参数是一个可选参数，它是一个函数。

返回值：此函数返回缩放行为。

下面的程序说明了D3.js中的zoom.on()函数

示例 1：

 
 
 
    
   
     
    
      
 
     
 
    
         
            Geeksforgeeks 
         
       
        D3.js | zoom.on() Function
           
        
           
        
            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")
               
         
    
 
   
 

输出：

示例 2：

 
 
 
    
  
     
    
      
 
     
 
    
         
            Geeksforgeeks 
         
       
        D3.js | zoom.on() Function
           
        
           
        
            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");
               
         
    
 
   
 

输出：