D3按条件填写线性图区域

Question

我有一个数据集

[
  {
    date: '2015-12',
    value: 100,
    priority: null,

  },
  {
    date: '2016-01',
    value: 200,
    priority: 'high',
  },
  {
    date: '2016-02',
    value: 200,
    priority: null,
  },
  {
    date: '2016-03',
    value: 200,
    priority: null,
  },
  {
    date: '2016-04',
    value: 100,
    priority: 'low',
  },
  {
    date: '2016-05',
    value: 250,
    priority: 'low',
  },
  {
    date: '2016-06',
    value: 250,
    priority: null,
  },
  {
    date: '2016-07',
    value: 100,
    priority: null,
  },
  {
    date: '2016-08',
    value: 250,
    priority: null,
  }
]

我已经使用D3 v4创建了线性图表。现在，我必须使用priority字段值从上到下用背景颜色填充图表的细分受众群？就像在图片上一样（高优先级细分应填入红色，低优先级应填入绿色等） 有人可以举一个例子来说明如何实现这种行为，或者为研究方向提供建议吗？

提前谢谢您。

Answer 1

您可以创建一个带刻度，用于计算两个日期之间每个刻度的宽度，例如：

const bandScale = d3.scaleBand()
 .domain(data.map(item => item.date).slice(1))
 .range([margin.left, width - margin.right])
 .paddingInner(0)  

之后，您可以使用rect元素添加新的迭代器，然后使用以下方法添加路径：

svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('fill', d => d.priority !== null ? 
                        d.priority === 'high' ? '#FFBBB7' : '#CCFFC4' :
                        'transparent')
    .attr('x', d => x(new Date(d.date)))
    .attr('y', margin.top)
    .attr('width', bandScale.bandwidth())
    .attr('height', height - margin.top - margin.bottom)

您将在x轴上添加一个刻度线的矩形，填充取决于优先级。

请参见以下观察到的内容：https://observablehq.com/@cstefanache/simple-line-chart