D3.js line.y()函数介绍

在使用D3.js绘制可视化图表时，我们经常需要用到线性图表。而绘制线性图表中，最基础的元素之一就是一条线。D3.js中的line.y()函数就是用来设置线性图表中线的y坐标的。

语法

line.y([accessor])

参数

• accessor：一个用来获取y值的函数，用来访问数据中的y值。

如果accessor参数未指定，则表示使用默认的y访问器函数。默认情况下，y访问器函数直接返回数据中的y值。例如：

const line = d3.line()
     .x(d => x(d.xValue))
     .y(d => y(d.yValue));

上面的代码中，y访问器函数返回的就是d.yValue。

可以通过以下方式指定一个自定义的y访问器函数：

const line = d3.line()
     .x(d => x(d.xValue))
     .y(function(d) { return y(d.yValue); });

上述代码中，y访问器函数为函数表达式。在y访问器函数中，我们可以根据自己的需求返回y值。

返回值

返回一个用来获取、设置y值访问器的函数。

示例

下面是一个简单的使用line.y()函数绘制线性图表的示例：

const data = [
  {x: 0, y: 5},
  {x: 1, y: 9},
  {x: 2, y: 7},
  {x: 3, y: 4},
  {x: 4, y: 3},
  {x: 5, y: 2},
  {x: 6, y: 1},
];

const margin = {top: 10, right: 30, bottom: 30, left: 60},
      width = 460 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

const svg = d3.select("body")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

const x = d3.scaleLinear().domain([0, 6]).range([0, width]);
const y = d3.scaleLinear().domain([0, 9]).range([height, 0]);

const line = d3.line()
     .x(d => x(d.x))
     .y(d => y(d.y));

svg.append("path")
     .datum(data)
     .attr("class", "line")
     .attr("d", line);

svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(x));

svg.append("g")
     .call(d3.axisLeft(y));

上述代码中，我们使用line.y()函数设置了线性图表中的y坐标。其中，y坐标的值是从数据中获取的。绘制的线性图表如下所示：

结论

D3.js中的line.y()函数是绘制线性图表的关键之一，可以用来设置线性图表中线的y坐标。有了它的帮助，我们可以方便地绘制出精美的线性图表。