d3.js brush.move()用法及代碼示例

D3.js中的brush.move()函數用於設置指定組上畫筆的活動選擇。

用法:

brush.move(group, selection);

參數：該函數接受如上所述和以下描述的單個參數

group:此參數是在其上實現畫筆的指定組。
selection:此參數是數字數組。

返回值：此函數返回定義該元素的筆刷選擇的數組。

以下示例程序旨在說明D3.js中的brush.move()函數

範例1：

<!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>

輸出：

範例2：

<!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>

輸出：

相關用法

注：本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 D3.js brush.move() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。