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

D3.js中的d3.brushSelection()函數用於獲取給定節點的畫筆選擇。

用法:

d3.brushSelection(this);

參數：

this:用於獲取當前畫筆的邊界。

返回值：此函數返回包含brush元素邊界的數組。

例：在此示例中，我們將創建一個畫筆，並將使用此方法獲得其選擇邊界。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            D3.js | d3.brushSelection() Function 
        </title> 
  
        <script src="https://d3js.org/d3.v4.min.js"> 
       </script> 
    </head> 
  
    <body> 
        <h1 style="color:green; 
                   text-align:center;"> 
            Geeksforgeeks 
        </h1> 
  
        <p style="text-align:center;"> 
            D3.js | d3.brushSelection() Function <br /> 
            Dimensions are:<br /> 
        </p> 
  
        <p style="text-align:center;" 
           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", brushed) 
  
         /* Initialise the brush area:start at 0, 0  
         and finishes at given width, height*/
                        .extent([ 
                            [0, 0], 
                            [600, 600], 
                        ]) 
                ); 
            function brushed() { 
// Using d3.brushSelection to get bounds of the brush 
                const sel = d3.brushSelection(this); 
                console.log(sel); 
                var p = document.getElementById("p"); 
                p.innerHTML = "side1:" 
                  + sel[0][1] + `<br>`  
                  + "side2:" + sel[1][1]  
                  + `<br>` + "side3:" 
                  + sel[0][0] + `<br>` 
                  + "side4:" + sel[1][0] + `<br>`; 
            } 
        </script> 
    </body> 
</html>

輸出：

相關用法

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