D3.js lineRadial.context() 方法

d3.lineRadial.context() 方法允许您在画布元素的上下文中呈现线条。当行生成器被调用时，该行将在当前上下文中呈现。我们可以使用此方法自行设置线条的上下文，例如颜色、笔触、填充等。默认值为 null。

句法：

d3.lineRadial.context(_context);

参数：

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

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

示例 1：在本示例中，我们将使用此方法更改颜色、描边。

 

    
         GeeksforGeeks
    
  
       


    


 var data = [
    {angle: 0, radius: 10},
    {angle: 3.14 * .5, radius: 35},
    {angle: 3.14 * .75, radius: 55},
    {angle: 3.14, radius: 60},
    {angle: 3.14 * 1.25, radius: 65},
    {angle: 3.14 * 1.5, radius: 70},
    {angle: 3.14 * 1.75, radius: 75},
    {angle: 3.14 * 2, radius: 80},
    {angle: 3.14 * 2.25, radius: 85},
    {angle: 3.14 * 2.5, radius: 90},
    {angle: 3.14 * 2.75, radius: 95},
    {angle: 3.14 * 3, radius: 100},
    {angle: 3.14 * 3.25, radius: 105},
    {angle: 3.14 * 3.5, radius: 110}
    ];
  
 var context = d3.select("#gfg").node().getContext("2d");
  
 var lineRadialGenerator = d3.lineRadial()
    .angle((d) => d.angle)
    .radius((d) => d.radius)
    .context(context);
  
  
  
 context.translate(100, 100);              
 lineRadialGenerator(data);
 context.strokeStyle = "green";
 context.stroke();
  
   

输出：

示例 2：在本示例中，我们将使用此方法更改颜色、填充。

 

    
        GeeksforGeeks
    
  
       


    


 var data = [
    {angle: 0, radius: 10},
    {angle: 3.14 * .5, radius: 35},
    {angle: 3.14 * .75, radius: 55},
    {angle: 3.14, radius: 60},
    {angle: 3.14 * 1.25, radius: 65},
    {angle: 3.14 * 1.5, radius: 70},
    {angle: 3.14 * 1.75, radius: 75},
    {angle: 3.14 * 2, radius: 80},
    {angle: 3.14 * 2.25, radius: 85},
    {angle: 3.14 * 2.5, radius: 90},
    {angle: 3.14 * 2.75, radius: 95},
    {angle: 3.14 * 3, radius: 100},
    {angle: 3.14 * 3.25, radius: 105},
    {angle: 3.14 * 3.5, radius: 110}
    ];
  
 var context = d3.select("#gfg").node().getContext("2d");
  
 var lineRadialGenerator = d3.lineRadial()
    .angle((d) => d.angle)
    .radius((d) => d.radius)
    .context(context);
  
 context.translate(100, 100);              
 lineRadialGenerator(data);
 context.fillStyle = "green";
 context.fill();
  
   

输出：