在画布上绘制d3形状的面积图？

Question

我尝试使用d3形状库在画布上创建区域图表。以下是代码：

const area = d3_shape.area()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.price); })
  .y0(height)
  .context(context);

context.strokeStyle = '#9DBBEB';
context.beginPath();
area(data);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 1.5;
context.stroke();

我在这里做错了什么？

https://github.com/d3/d3-shape

https://bl.ocks.org/mbostock/1550e57e12e73b86ad9e

Answer 1

您正在设置区域访问器功能错误，应该是：

var area = d3_shape.area()
    .x(function(d) { return x(d.date); })
    .y0(height) //<-- y0
    .y1(function(d) { return y(d.close); }) //<-- y1
    .context(context);

正在运行代码here。