Related Articles

Related Articles

D3.js brush.move() Function
  • Last Updated : 24 Aug, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
        
<head>  
        
    <script src=
        "https://d3js.org/d3.v5.min.js">
    </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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
        
<head>  
    <meta charset="utf-8">
  
    <script src=
        "https://d3js.org/d3.v4.min.js">
    </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>  

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :