D3.js Brush.extent()函数

D3.js中的brush.extent()函数用于将可刷范围设置为指定点数组[[ x0 , y0 ], [ x1 , y1 ]]，其中[ x0 , y0 ]为左上角[ x1 , y1 ] 是右下角并返回画笔。

句法：

brush.extent([extent]);

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

• 范围：这个参数决定了不可见覆盖的大小，也限制了画笔的选择

返回值：该函数返回画笔。

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

示例 1：

HTML

 
 
  

     
     
 
    
 
    
         
            Geeksforgeeks 
         
      
         
            D3.js | brush.extent() Function  
        
   
          
        
         
          
         
            // Selecting SVG element 
            d3.select("#brush") 
              
            // Creating a brush using the  
            // d3.brush function 
            .call( d3.brush()    
              
            // use of brush.extent() Function
            .extent( [ [0,0], [600,300] ] )
              
            )
            .style("fill", "#e0afdd");
         
    
 
  

输出：

示例 2：

HTML

 
 
  

     
     
     
 
    
 
    
         
            Geeksforgeeks 
         
      
         
            D3.js | brush.extent() Function  
            Dimensions are: 
        
   
      
        
   
      
        
         
          
         
            // Selecting SVG element 
            d3.select("#brush")
            // Creating a brush 
            .call(d3.brush() 
            // Calling a function 
            // on brush change 
            .on("brush", geekBrush)
            // Use of brush.extent() Function
            .extent([[0, 0], [600, 300]]) 
            ); 
              
            function geekBrush() { 
                const sel = d3.brushSelection(this); 
                  
                var p = document.getElementById("p"); 
                p.innerHTML = "X0 : " 
                  + sel[0][1] + `<br>`  
                  + "X1 : " + sel[1][1]  
                  + `<br>` + "Y0 : " 
                  + sel[0][0] + `<br>` 
                  + "Y1 : " + sel[1][0] + `<br>`; 
            } 
         
    
 
  

输出：