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

D3.js中的brush.on()函數用於為指定的類型名設置事件偵聽器並返回畫筆。

用法:

brush.on( typenames, listener )

參數：此函數接受上述和以下描述的兩個參數：

typenames:它是包含一個或多個用空格分隔的類型名稱的字符串。
listener:它是用作指定類型名稱的事件偵聽器的函數。它是一個可選參數。

返回值：此函數返回要使用的畫筆。

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

範例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> 
  
    <h3>D3.js | brush.on() Function </h3> 
  
    <p style="color:green;">Center Point:</p> 
  
  
    <p style="color:green;" id="p"></p> 
  
  
    <svg width="300" height="300" id="brush"> 
    </svg> 
  
    <script> 
      // Select the SVG element  
      d3.select("#brush") 
  
        // Create a brush  
        .call(d3.brush() 
  
          // Use the brush.on() function 
          // to set the given event listener 
          .on("brush", geekBrush) 
          .extent([[0, 0], 
          [300, 300]] 
          ) 
        ); 
  
      function geekBrush() { 
        const sel = d3.brushSelection(this); 
  
        // Select the paragraph element 
        var p = document.getElementById("p"); 
  
        // Calculate the center point 
        // to be displayed 
        var pt1 = sel[1][0] - sel[0][0]; 
        var pt2 = sel[1][1] - sel[0][1]; 
  
        p.innerHTML = "( " 
          + pt1 + ", " + pt2 + " )"; 
      }  
    </script> 
  </center> 
</body> 
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <script src= 
"https://d3js.org/d3.v4.min.js"> 
  </script> 
  <style> 
    circle { 
      fill-opacity:0.2; 
    } 
  
    circle.active { 
      fill-opacity:0.8; 
      stroke:green; 
      fill:red; 
    } 
  </style> 
</head> 
  
<body> 
  <center> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>D3.js | brush.on() Function </h3> 
  
    <svg width="400" height="200"></svg> 
  
    <script> 
      var data = d3.range(25).map(Math.random); 
  
      // Select the SVG element  
      var svg = d3.select("svg"), 
        margin = { 
          top:0, right:50, 
          bottom:50, left:50 
        }, 
        width = svg.attr("width") - 
          margin.left - margin.right, 
        height = svg.attr("height") - 
          margin.top - margin.bottom, 
        g = svg.append("g") 
          .attr("transform", "translate(" 
            + margin.left + "," + margin.top + ")" 
          ); 
  
      var x = d3.scaleLinear().range([0, width]), 
        y = d3.randomNormal(height / 2, height / 8); 
  
      var brush = d3.brushX() 
        // Use the brush.on() function 
        // to set the given event listener 
        .on("start brush end", brushmoved) 
  
        .extent([[0, 0], [width, height]]); 
  
      var circle = g.append("g") 
        .attr("class", "circle") 
        .selectAll("circle") 
        .data(data) 
        .enter().append("circle") 
        .attr("transform", function (d) { 
          return "translate(" 
            + x(d) + "," + y() + ")"; 
        }) 
        .attr("r", 10); 
  
      var gBrush = g.append("g") 
        .attr("class", "brush") 
        .call(brush); 
  
      gBrush.call(brush.move, [0.3, 0.5].map(x)); 
  
      var bs = ""; 
  
      // Define the function to be 
      // called when the brush is moved 
      function brushmoved() { 
        var s = d3.event.selection; 
  
        if (s == null) { 
          handle.attr("display", "none"); 
          circle.classed("active", false); 
        } else { 
          var sx = s.map(x.invert); 
          circle.classed("active", function (d) { 
            return sx[0] <= d && d <= sx[1]; 
          }); 
          handle.attr("display", null) 
            .attr("transform", function (d, i) { 
              return "translate(" 
                + s[i] + "," + height / 2 + ")"; 
            }); 
        } 
      } 
    </script> 
  </center> 
</body> 
</html>

輸出：

相關用法

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