D3.js line.context() 方法

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

句法：

d3.line.context(_context);

参数：

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

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

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

  d3.line.defined()



  

    
           GeeksforGeeks
    
  
    
      

  
    var points = [
      {x: 0, y: 0},  
      {x: 1, y: 3},
      {x: 2, y: 15},
      {x: 3, y: 8},
      {x: 4, y: 11},
      {x: 5, y: 15},
      {x: 6, y: 20},
      {x: 7, y: 25}];
    var xp = d3.scaleLinear().domain([0, 7]).range([25, 200]);
    var yp = d3.scaleLinear().domain([0, 25]).range([175, 25]);
    var cont = d3.select("#gfg").node().getContext("2d");
    var line = d3.line()
      .x(d => xp(d.x))
      .y(d => yp(d.y))
      .context(cont);
  
    line(points);
  
    cont.strokeStyle = "green";
    cont.stroke();

输出：

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

  d3.line.defined()


 
  

    
         GeeksforGeeks
     
  
    

  
    var points = [
      {x: 0, y: 0},  
      {x: 1, y: 3},
      {x: 2, y: 15},
      {x: 3, y: 8},
      {x: 4, y: 11},
      {x: 5, y: 15},
      {x: 6, y: 20},
      {x: 7, y: 25}];
    var xp = d3.scaleLinear().domain([0, 7]).range([25, 200]);
    var yp = d3.scaleLinear().domain([0, 25]).range([175, 25]);
    var cont = d3.select("#gfg").node().getContext("2d");
    var line = d3.line()
      .x(d => xp(d.x))
      .y(d => yp(d.y))
      .context(cont);
  
    line(points);
  
    cont.strokeStyle = "green";
    cont.fill();

输出：