d3.js brush.extent()用法及代碼示例

D3.js中的brush.extent()函數用於將可刷範圍設置為指定的點陣列[[00，00]，[x1，11]]，其中[00，00]是左上角，[x1，11]是右下角並返回畫筆。

用法:

brush.extent([extent]);

參數：該函數接受如上所述和以下描述的單個參數

extent:此參數確定不可見覆蓋的大小，並限製畫筆的選擇

返回值：此函數返回畫筆。

以下示例程序旨在說明D3.js中的brush.extent()函數

範例1：

HTML

<!DOCTYPE html>  
<html>  
  
<head> 
    <script src= 
        "https://d3js.org/d3.v4.min.js">  
    </script>  
</head>  
    
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
      
        <p style="color:green;">  
            D3.js | brush.extent() Function <br>  
        </p> 
   
          
        <svg width="400" height="200" id="brush"> 
        </svg>  
          
        <script>  
            // 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"); 
        </script>  
    </center> 
</body>  
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html>  
<html>  
  
<head> 
    <script src= 
        "https://d3js.org/d3.v4.min.js">  
    </script>  
     
</head>  
    
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
      
        <p style="color:green;">  
            D3.js | brush.extent() Function <br>  
            Dimensions are:<br>  
        </p> 
   
      
        <p id="p"></p> 
   
      
        <svg width="600" height="600" id="brush"> 
        </svg>  
          
        <script>  
            // 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>`;  
            }  
        </script>  
    </center> 
</body>  
  
</html>

輸出：

相關用法

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