D3.js quadraticCurveTo()函数

d3.path.quadraticCurveTo()函数用于将二次贝塞尔线段从当前点通过某些控制点绘制到某个点。

句法：

path.quadraticCurveTo(cpx, cpy, x, y)

参数：它采用上面给出的四个参数，如下所述。

• cpx：二次控制点的x坐标。
• cpy：二次控制点的y坐标。
• x：终点的x坐标。
• y：终点的y坐标。

示例 1：

HTML

  

    
    
  
    
    
  
    
        h1 {
            color: green;
        }
  
        svg {
            background-color: #f2f2f2;
        }
  
        .path2 {
            stroke: #000;
        }
    

  

    
        GeeksforGeeks
        D3.js | Path.quadraticCurveTo() Function
        
  
        
            
        
    
  
    
          
        // Creating a path 
        var path = d3.path();
        path.moveTo(50, 50);
        path.quadraticCurveTo(95, 0, 50, 90)
          
        // Closing the path 
        path.closePath();
        path.quadraticCurveTo(5, 0, 50, 90)
          
        // Closing the path 
        path.closePath();
        d3.select(".path2").attr("d", path); 
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
  
    
        h1 {
            color: green;
        }
  
        svg {
            background-color: #f2f2f2;
        }
  
        .path2 {
            stroke: #000;
        }
    

  

    
        GeeksforGeeks
        D3.js | Path.quadraticCurveTo() Function
        
        
            
        
    
      
    ;
  
        // Creating a path 
        var path = d3.path();
        path.moveTo(10, 10);
        path.quadraticCurveTo(95, 0, 50, 90)
      
        // Closing the path 
        path.closePath();
        d3.select(".path2").attr("d", path); 
    

  

输出：