D3.js line.curve() 方法

d3.line.curve() 方法用于为我们的线提供一条曲线。 D3.js 提供了几个曲线工厂，可以用来给出不同的曲线。

句法：

d3.line.curve(curve_factory);

参数：

• curve_factory：要提供给线的曲线类型。

返回值：此方法没有返回值。

示例 1：在本示例中，我们将使用 curveBasis 曲线工厂。

  d3.line.curve()



  

    GeeksforGeeks
  
    

  
var points = [
  {xpoint: 25,  ypoint: 150},
  {xpoint: 75,  ypoint: 85},
  {xpoint: 100, ypoint: 115},
  {xpoint: 175, ypoint: 25}];
  
var Gen = d3.line()
  .x((p) => p.xpoint)
  .y((p) => p.ypoint)
  .curve(d3.curveBasis);
    
d3.select("#gfg")
  .append("path")
  .attr("d", Gen(points))
  .attr("fill", "none")
  .attr("stroke", "green");
  

输出：

示例 2：在此示例中，我们将使用 curveCardinal 曲线工厂。

  d3.line.curve()



  

    
         GeeksforGeeks
    
  
    
    

  
var points = [
  {xpoint: 25,  ypoint: 150},
  {xpoint: 75,  ypoint: 85},
  {xpoint: 100, ypoint: 115},
  {xpoint: 175, ypoint: 25}];
  
var Gen = d3.line()
  .x((p) => p.xpoint)
  .y((p) => p.ypoint)
  .curve(d3.curveCardinal);
  
d3.select("#gfg")
  .append("path")
  .attr("d", Gen(points))
  .attr("fill", "none")
  .attr("stroke", "green");
  

输出：