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=   </script> </head> <body>   <center>     <h1 style="color: green;">       neveropen     </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> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head>   <script src=   </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;">neveropen</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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
