D3.js line.x() 方法

d3.line.x() 方法设置或获取线的 x 访问点。如果提供了 x，它必须是一个数字或一个返回数字的函数。

句法：

d3.line.x(x-point);

参数：

• x 点：此方法采用可以从点数组中设置的 x 点。

返回值：此方法返回行的 x 访问器点。

示例 1：使用此方法设置 x 点。对于这里的 y 点，我们使用了 line.y()函数。

  Line in D3.js



  

    
         GeeksforGeeks
   
  
    
  

  
var points = [
  {xpoint: 25,  ypoint: 150},
  {xpoint: 75,  ypoint: 85},
  {xpoint: 100, ypoint: 115},
  {xpoint: 175, ypoint: 25}];
  
var Gen = d3.line()
  // Setting the x-point
  .x((p) => p.xpoint)
  .y((p) => p.ypoint);
  
d3.select("#gfg")
  .append("path")
  .attr("d", Gen(points))
  .attr("fill", "none")
  .attr("stroke", "green");

输出：

示例 2：获取 x 点的函数。

  Line in D3.js



  

    
       GeeksforGeeks
    
  
    

  
var points = [
  {xpoint: 25,  ypoint: 150},
  {xpoint: 75,  ypoint: 85},
  {xpoint: 100, ypoint: 115},
  {xpoint: 175, ypoint: 25}];
  
var Gen = d3.line()
  .x((p) => p.xpoint)
  .y((p) => p.ypoint);
  
d3.select("#gfg")
  .append("path")
  .attr("d", Gen(points))
  .attr("fill", "none")
  .attr("stroke", "green");
console.log(Gen.x());
console.log(Gen.x)

输出：