在畫布上用 d3 形狀繪制面積圖？

Question

我正在嘗試使用 d3-shape 庫在畫布上創建面積圖。 下面是代碼：

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

你設置的area accessor函數有誤，應該是：

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);

在這里運行代碼。