D3.js areaRadial.curve() 方法

D3.js 中的areaRadial.curve()方法用于指定给定区域径向的曲线类型。 D3.js 提供了几个曲线工厂，可以用来获取不同类型的曲线。

句法：

areaRadial.curve( curve_factory )

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

• curve_factory：它是用于区域径向的曲线类型。它是一个可选参数。

返回值：此方法不返回任何值。

下面给出了 D3.js 中areaRadial.curve()方法的几个示例：

示例 1：

HTML

  
  


  
    GeeksforGeeks
  
  
    D3.js | areaRadial.curve() Method
  
  
    
      
    
  
  
    var points = [
      { x: 0, y: 0 },
      { x: 2, y: 3 },
      { x: 4, y: 1 },
      { x: 6, y: 8 },
      { x: 8, y: 17 },
      { x: 10, y: 15 },
      { x: 12, y: 20 }];
  
    var xScale = d3.scaleLinear()
        .domain([0, 6])
        .range([0, 2 * Math.PI]);
    var yScale = d3.scaleLinear()
        .domain([0, 20])
        .range([90, 30]);
  
    var Gen = d3.areaRadial()
      .angle(d => xScale(d.x / 2))
      .innerRadius(d => yScale(d.y) / 2)
      .outerRadius(d => yScale(d.y))
  
      // Set the given
      // curve factory
      .curve(d3.curveBasis);
  
    d3.select("#gfg")
      .select("g")
      .append("path")
      .attr("d", Gen(points))
      .attr("fill", "green")
      .attr("stroke", "black");
  

输出：

示例 2：

HTML

 
  
  


  
    GeeksforGeeks
  
  
  
    D3.js | areaRadial.curve() Method
  
  
    
      
    
  
  
    var data = [
      { x: 10, y: 1 },
      { x: 15, y: 3 },
      { x: 20, y: 5 },
      { x: 25, y: 7 },
      { x: 30, y: 9 },
      { x: 35, y: 11 },
      { x: 40, y: 13 }];
  
    var xScale = d3.scaleLinear()
        .domain([0, 8])
        .range([25, 200]);
    var yScale = d3.scaleLinear()
        .domain([0, 20])
        .range([200, 25]);
  
    var Gen = d3.areaRadial()
      .angle(d => xScale(d.x / 3))
      .innerRadius(d => yScale(d.y / 2))
      .outerRadius(d => yScale(d.y))
  
      // Set the given
      // curve factory
      .curve(d3.curveCardinal);
  
    d3.select("#gfg")
      .select("g")
      .append("path")
      .attr("d", Gen(data))
      .attr("fill", "green")
      .attr("stroke", "black");
  

输出：