D3.js area.context() 方法

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

句法：

d3.area.context(_context);

参数：

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

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

示例 1：

HTML

    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        D3.js | area.context() Method
    
  
    
        
        
    
  
    
        var data = [
          {xpoint: 25,  ypoint: 150},
          {xpoint: 75,  ypoint: 50},
          {xpoint: 100, ypoint: 150},
          {xpoint: 100, ypoint: 50},
          {xpoint: 200, ypoint: 150}];
  
        var context = d3.select("#gfg")
               .node().getContext("2d");
  
  
        var Gen = d3.area()
              .x((p) => p.xpoint)
              .y0((p) => p.ypoint/2)
              .y1((p) => p.ypoint)
              .context(context);
  
        context.translate(10,50);              
        Gen(data);
        context.strokeStyle = "black";
        context.fillStyle = "green";
        context.fill();
        context.stroke();
    

  

输出：

示例 2：

HTML

    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        D3.js | area.context() Method
    
  
    
        
        
    
  
    
        var points = [
          {x: 50, y: 10},
          {x: 150, y: 30},
          {x: 200, y: 150},
          {x: 250, y: 10},
          {x: 300, y: 150},
          {x: 350, y: 50},
          {x: 400, y: 190}];
  
        var context = d3.select("#gfg")
               .node().getContext("2d");
  
  
        var Gen = d3.area()
              .x((p) => p.x)
              .y0((p) => p.y/2)
              .y1((p) => p.y)
              .context(context);
  
        context.translate(10,10);              
        Gen(points);
        context.strokeStyle = "black";
        context.fillStyle = "green";
        context.fill();
        context.stroke();
  
    

  

输出：