D3.js 中的 line.context() 方法

D3.js 是一个基于数据的 JavaScript 可视化库，提供了许多用于数据操作、DOM 操作、数据可视化等功能的 API。其中 line.context() 方法就是用来创建路径生成器的方法之一。

语法

line.context(context)

参数

• context：一个 CanvasRenderingContext2D 对象，用来设置路径生成器所画的线条的样式。

返回值

返回当前路径生成器对象。

解释

在创建路径生成器的时候，我们可以使用 line.context() 方法来指定一个 CanvasRenderingContext2D 对象，该对象用来设置路径生成器所画的线条的样式。

举个例子，我们可以创建一个 canvas 元素，并从中获取到其 2D 上下文。然后，使用该上下文对象来生成一个路径生成器，在绘制路径时，路径上的线条就会根据上下文对象所设置的样式进行绘制。

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const data = [...];
const line = d3.line()
  .x(d => d.x)
  .y(d => d.y)
  .context(context);

context.strokeStyle = '#000';
context.lineWidth = 2;
context.beginPath();
line(data);
context.stroke();

注意事项

• 由于 line.context() 方法只能用于 CanvasRenderingContext2D 对象，因此只能将其用于绘制路径到 canvas 元素上。
• line.context() 方法会替换默认的上下文对象，因此在使用该方法后，所有的路径生成器都将使用该上下文对象进行路径绘制。如果需要在使用其他路径生成器时恢复默认的上下文对象，需要使用 line.context(null) 将上下文对象还原。

参考资料

• D3.js line.context() API 文档