D3.js areaRadial.context() 方法

D3.js中的areaRadial.context()方法允许您指定画布元素的上下文，在该上下文中将呈现区域径向。调用生成器时，区域径向将在当前上下文中呈现。我们可以使用颜色、描边、填充等方法自行设置区域的上下文。默认值为空。

句法：

d3.areaRadial.context( _context )

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

• _context：它是 用户设置的上下文。

返回值：此方法返回当前上下文。

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

示例 1：

HTML

  
  


  
    GeeksforGeeks
  
  
    D3.js | areaRadial.context() 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 }];
  
    // Get the context
    var context = d3.select("#gfg")
        .node()
        .getContext("2d");
  
    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))
      
      // Specify the context
      // to be used
      .context(context);
  
    context.translate(100, 100);
    Gen(points);
    context.strokeStyle = "black";
    context.fillStyle = "green";
    context.fill();
    context.stroke();
  

输出：

示例 2：

HTML

  
  


  
    GeeksforGeeks
  
  
    D3.js | areaRadial.context() 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 }];
  
    // Get the context
    var context = d3.select("#gfg")
        .node()
        .getContext("2d");
  
    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))
  
      // Specify the context
      // to be used
      .context(context);
  
    context.translate(100, 100);
    Gen(data);
    context.strokeStyle = "black";
    context.fillStyle = "green";
    context.fill();
    context.stroke();
  

输出：