如何更改此折线图中每个部分的颜色？

Question

所以我正在尝试制作这张图表

我现在有这个

我需要做这个简单的事情，用数据放这个彩色背景

Answer 1

假设您已经设置了 x 轴，也许您可以这样做（如果您使用的是 v5，请根据需要进行调整）：

var overlays = [[0, 10], [30, 60]];

svg.selectAll('rect.overlay')
  .data(overlays)
  .enter()
  .append('rect')
  .attr('class', 'overlay')
  .attr('x', d => x(d[0])) // place the rectangle on the x axis based on the start point
  .attr('width', d => x(d[1]) - x(d[0])) // calculate the width
  .attr('y', 0)
  .attr('height', height)
  .attr('fill', '#00000022');

如何更改此折线图中每个部分的颜色？

How can i change the color per section in this line chart?

linechart

d3.js