D3.js Brush.on()函数

D3.js中的brush.on()函数用于为指定的typenames 设置事件监听器并返回画笔。

句法：

brush.on( typenames, listener )

参数：该函数接受上面提到的两个参数，如下所述：

• typenames：它是包含一个或多个由空格分隔的类型名的字符串。
• listener：它是用作指定类型名称的事件侦听器的函数。它是一个可选参数。

返回值：此函数返回要使用的画笔。

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

示例 1：

HTML

  
  


  
    
      GeeksforGeeks
    
  
    D3.js | brush.on() Function 
  
    Center Point:
  
  
    
  
  
    
    
  
    
      // 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 + " )";
      } 
    
  

输出：

示例 2：

HTML

  
  
  
    circle {
      fill-opacity: 0.2;
    }
  
    circle.active {
      fill-opacity: 0.8;
      stroke: green;
      fill: red;
    }
  

  

  
    GeeksforGeeks
    D3.js | brush.on() Function 
  
    
  
    
      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 + ")";
            });
        }
      }
    
  

输出：