时间戳

首页 > 解决方案 > D3 按条件填充线性图的区域

d3.js - D3 按条件填充线性图的区域

问题描述

我有一个数据集

[
  {
    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现在我必须按字段值从上到下用背景颜色填充图表的段吗？像在图像上（高优先级段应该用红色填充，低 - 用绿色等）有人可以举例说明如何实现这种行为，或者建议研究方向吗？

先感谢您。在此处输入图像描述

标签： d3.js

解决方案

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

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 轴上为刻度添加一个矩形，其中填充取决于优先级。

请参阅以下 observable：https ://observablehq.com/@cstefanache/simple-line-chart

推荐阅读