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

Question

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

简单折线图

这是小提琴

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

数据如下所示：

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

• 范围开始表示图形上阴影区域的开始。
• 范围结束表示图形上阴影区域的末端。
• 标签是显示在阴影区域顶部的文本
• 颜色是阴影区域的颜色

图表将输出阴影区域(带有标签(，如下所示：

具有阴影时间帧区域的简单折线图

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

非常感谢您的帮助！

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

更新的小提琴。

如果需要添加多个时间帧，请将它们存储在数组中，并使用如下所示的 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