D3.js Brush.clear()函数

D3.js中的brush.clear()函数用于设置画笔在指定组上的活动选择。它是使用 null 选择的 Brush.move 的别名。

句法：

brush.clear(group);

参数：此函数接受如上所述和如下所述的单个参数

• group：此参数是指定的组，在其上实现画笔。

返回值：此函数返回定义该元素的画笔选择的数组。

下面的程序说明了D3.js中的Brush.clear()函数

示例 1：

HTML

  
  
        
  
    
     
  
    
  
    
        GeeksForGeeks
  
        D3.js | brush.clear() Function  
          
        Click
        
        
        
         
          
          
            // 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().clear)
            });     
          
    
  
    

输出：

示例 2：

HTML

  
  
        
  
    
        
    
     
      
    
  
        circle {
          fill-opacity: 0.2;
        }
          
        circle.active {
          fill-opacity: 0.8;
          stroke: red;
          fill: green;
        }
  
    
  
    
  
    
        GeeksForGeeks
  
        D3.js | brush.clear() Function  
          
        
          
          
            var data = d3.range(50).map(Math.random);
  
            var svg = d3.select("svg"),
                margin = {top: 10, 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),
                z = d3.scaleLinear().range([0, height]);
  
            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.axisLeft(z).ticks(3));
  
            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.clear);
  
            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 + ")"; 
                });
              }
            }
              
          
    
  
    

输出：