D3.js bezierCurveTo()函数

d3.js 中的d3.bezierCurveTo()函数用于将三次贝塞尔曲线从当前给定点通过某些控制点绘制到某个点。

句法：

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

参数：此函数采用以下参数。

• cpx1：它是贝塞尔控制点的 x1 坐标。
• cpy1：它是贝塞尔控制点的 y1 坐标。
• cpx2：它是贝塞尔控制点的 x2 坐标。
• cpy2：它是贝塞尔控制点的 y2 坐标。
• x：端点的x坐标。
• y：端点的y坐标。

返回值：此函数不返回任何值。

示例 1：

HTML

  

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

  

    
        GeeksforGeeks
        D3.js | Path.bezierCurveTo() Function
        
        
            
        
    
  
    
  
        // Creating a path 
        var path = d3.path();
        path.moveTo(10, 10);
        path.bezierCurveTo(95, 10, 50, 90, 10, 10)
          
        // 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.bezierCurveTo() Function
        
        
            
        
    
  
    
  
        // Creating a path 
        var path = d3.path();
        path.moveTo(10, 10);
        path.bezierCurveTo(95, 10, 50, 90, 10, 10)
          
        // Closing the path 
        path.closePath();
        path.bezierCurveTo(90, 10, 15, 110, 10, 10)
          
        // Closing the path 
        path.closePath();
        d3.select(".path2").attr("d", path); 
    

  

输出：