D3.js brush.on() Function

Last Updated : 01 Aug, 2024

The brush.on() function in D3.js is used to set the event listener for the specified typenames and returns the brush.

Syntax:

brush.on( typenames, listener )

Parameters:

This function accepts two parameters as mentioned above and described below:

typenames: It is the string containing one or more typenames separated by whitespace.
listener: It is the function to be used as the event listener for the specified typenames. It is an optional parameter.

Return Value:

This function returns the brush to be used.

Below programs illustrate the brush.on() function in D3.js:

Example 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>
  </center>
  
    <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>
  
</body>

</html>

Output:

Example 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>

Output:

D3.js brushY() Function

SHUBHAMSINGH10

Improve

Article Tags :

D3.js brush.on() Function

Syntax:

Parameters:

Return Value:

Similar Reads

Thank You!

What kind of Experience do you want to share?