D3.js brush.on() Function
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;"> 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> |
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;">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:
Please Login to comment...