D3.js 在折线图的线条后面添加阴影时间范围区域

Question

我正在使用 D3.js (v4) 创建一个简单的折线图，如下所示：

Simple Line Graph

我想添加第二个数据集，该数据集显示线条后面的阴影时间范围区域。

数据看起来像这样：

RangeStart: 31-Mar-18
RangeEnd: 16-Apr-18
Label: "Golden Period"
Color: "#3cfb34"

RangeStart 表示图形上阴影区域的起点。
RangeEnd 表示图形上阴影区域的末端。
标签是显示在阴影区域顶部的文本
颜色是阴影区域的颜色

并且图表会像这样输出阴影区域（带有标签）：

Simple Line Graph with Shaded Timeframe Region

我怎样才能完成这样的事情？

非常感谢您的帮助！

Answer 1

您可以在添加行之前添加一个矩形和一个文本：

// ADD TIMEFRAME
var timeframe = {
    RangeStart: parseDate('31-Mar-18'),
    RangeEnd: parseDate('16-Apr-18'),
    Label: "Golden Period",
    Color: "#3cfb34"
};

var gTimeframe = svg.append("g").attr("class", "timeframe");

gTimeframe.append("rect")
    .attr("x", x(timeframe.RangeStart))
    .attr("y", 0)
    .attr("width", x(timeframe.RangeEnd) - x(timeframe.RangeStart))
    .attr("height", height)
    .style("fill", timeframe.Color);

gTimeframe.append("text")
    .attr("x", x(timeframe.RangeStart) + 5)
    .attr("y", 15)
    .text(timeframe.Label);
// END TIMEFRAME

Updated Fiddle.

如果您需要添加多个时间帧，将它们存储在一个数组中，并使用 D3 数据绑定，如下所示：

// ADD TIMEFRAME
var timeframes = [
  {
    RangeStart: parseDate('31-Mar-18'),
    RangeEnd: parseDate('16-Apr-18'),
    Label: "Golden Period",
    Color: "#3cfb34"
  },
  {
    RangeStart: parseDate('20-Apr-18'),
    RangeEnd: parseDate('3-May-18'),
    Label: "Other Period",
    Color: "steelblue"
  },
];

var gTimeframes = svg
    .selectAll("g.timeframe")
  .data(timeframes).enter()
    .append("g").attr("class", "timeframe");

gTimeframes.append("rect")
    .attr("x", function(d) { return x(d.RangeStart); })
    .attr("y", 0)
    .attr("width", function(d) { return x(d.RangeEnd) - x(d.RangeStart); })
    .attr("height", height)
    .style("fill", function(d) { return d.Color; });

gTimeframes.append("text")
    .attr("x", function(d) { return x(d.RangeStart) + 5; })
    .attr("y", 15)
    .text(function(d) { return d.Label; });

JSFiddle

D3.js 在折线图的线条后面添加阴影时间范围区域

D3.js Add a Shaded Timeframe Region Behind A Line on a Line Graph

javascript

charts

linegraph

d3.js