The brush.move() Function in D3.js is used to set the active selection of the brush on the specified group.
Syntax:
brush.move(group, selection);
Parameters: This function accepts a single parameter as mentioned above and described below
- group: This parameter is the specified group on which brush is implemented.
- selection: This parameter is an array of numbers.
Return Value: This function returns the array that defines the brush selection for that element.
Below programs illustrate the brush.move() function in D3.js
Example 1:
<!DOCTYPE html>  <html>          <head>              <script src=     </script> </head>      <body>      <center>         <h1 style="color:green;">GeeksForGeeks</h1>         <h3>D3.js | brush.move() Function </h3>                   <button>Click</button>         <br>         <br>         <svg style="background-color: lightgreen;"              width="500" height="100">                               </svg>                   <script>                            // Selecting SVG element             const svg = d3.select("svg");                           const g = svg.append("g");                           // Creating a brush using the              // d3.brush function             g.call(d3.brush());                           // Use of brush.move() function             d3.select("button").on("click", function() {                 g.call(d3.brush().move, [                     [100, 0],                     [400, 100]                 ])             });             </script>      </center> </body>      </html> |
Output:
Example 2:
<!DOCTYPE html>  <html>          <head>      <meta charset="utf-8">       <script src=     </script>           <style>           circle {       fill-opacity: 0.2;     }           circle.active {       fill-opacity: 0.8;       stroke: red;       fill: green;     }           </style> </head>      <body>      <center>         <h1 style="color:green;">GeeksForGeeks</h1>         <h3>D3.js | brush.move() Function </h3>                   <svg width="600" height="300"></svg>                   <script>              var data = d3.range(100).map(Math.random);               var svg = d3.select("svg"),                 margin = {top: 50, 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()                 .extent([[0, 0], [width, height]])                 .on("start brush end", brushmoved);               g.append("g")                 .attr("class", "axis axis--x")                 .attr("transform", "translate(0, 0)")                 .call(d3.axisTop(x));               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 = "";             function brushmoved() {               var s = d3.event.selection;                               if (d3.event.type === "start"){                 bs = d3.event.selection;               } else if (d3.event.type === "end"){                 if (bs[0] !== s[0] && bs[1] !== s[1]) {                   console.log('moved both');                 } else if (bs[0] !== s[0]) {                   console.log('moved left');                 } else {                   console.log('moved right');                 }               }                               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!
