Javascript 用多种颜色填充折线图区域

我正在尝试创建如下图表：

虽然我已经创建了它的骨架，但仍然坚持使用多种颜色填充这些区域。我用d3来完成这个图表。 我的参考代码：

var line = d3.line()
    .x(function(d) { return x(d.ind); })
    .y(function(d) { return y(d.tot_cases); })

  x.domain(data.map(function(d) { return d.ind; }));

  y.domain([0, d3.max(data, function(d) { return d.tot_cases; })]);
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));



  var lineAndDots = g.append("g")
            .attr("class", "line-and-dots")
        .attr("transform", "translate(" + ((margin.left + margin.right) / 3) + "," + 0 + ")")

    // Data line
    lineAndDots.append("path")
        .datum(data)
        .attr("class", "data-line")
        .attr("d", line);

    // Data dots
    lineAndDots.selectAll("line-circle")
            .data(data)
        .enter().append("circle")
        .attr("class", "data-circle")
        .attr("r", 5)
        .attr("cx", function(d) { return x(d.ind); })
        .attr("cy", function(d) { return y(d.tot_cases); });

  g.selectAll("lines-ax")
            .data(data)
        .enter().append("line")
        .attr("class", "line")
        .attr("x1", function(d) { return x(d.ind) + margin.right; })
        .attr("y1", function(d) { return height - margin.bottom})
        .attr("x2", function(d) { return x(d.ind) + margin.right ; })
        .attr("y2", function(d) { return y(d.tot_cases); })
        .attr("fill", "black")
        .attr("stroke", "gray")
        .attr("stroke-width", 3);

你可以在这里找到我的全部代码。

---

任何关于如何做到这一点的想法都非常有用。提前谢谢

不是一个干净的实现，因为我没有实现D3的

选择、输入、附加

模式，而且我添加了一个随机颜色生成器，我将留给您清理它并将您的颜色方案添加到图表中

您可能会注意到最后一个元素缺少颜色和多边形项，因为没有关于如何添加它的指示。

var svg=d3.选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.padding（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[
{“ind”：“已审查”，总数：25000}，
{“ind”：“已通知”，总数：17000}，
{“ind”：“启动”，总数：10000}，
{“ind”：“HIV统计已确认”，tot_病例数：14000}，
{“ind”：“艾滋病毒未知”，总数：15000}
]
变量笔划颜色={
“已检查”：“2B597C”，
“通知”：“6D5C7E”，
“已启动”：“BF6D84”，
“HIV统计数据确认”：“F1737E”，
“艾滋病毒未知”：“F9B294”
}
var color=[“2B597C”、“6D5C7E”、“BF6D84”、“F1737E”、“F9B294”]
var line=d3.line（）
.x（函数（d）{返回x（d.ind）；}）
.y（函数（d）{返回y（d.tot_情形）；}）
x、 域（data.map（函数（d）{return d.ind；}））；
y、 域（[0，d3.max（数据，函数（d）{returnd.tot_cases；}）]；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
var LINEANDOTS=g.append（“g”）
.attr（“类”、“线和点”）
.attr（“转换”、“平移”（+（（margin.left+margin.right）/3）+>，“+0+”）
//数据线
lineAndDots.append（“路径”）
.基准（数据）
.attr（“类”、“数据行”）
.attr（“d”，行）
.style（'stroke'，函数（d）{
对于（i=0；i<5；i++）{
返回笔划（颜色[d[i].ind]；}）
.style（'填充'，'无'）
//数据点
lineAndDots。选择All（“线圆”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“类”、“数据圈”）
.attr（“r”，5）
.attr（“cx”，函数（d）{返回x（d.ind）；}）
.attr（“cy”，函数（d）{返回y（d.tot_情形）；}）
g、 选择全部（“ax行”）
.数据（数据）
.enter（）.append（“行”）
.attr（“类”、“行”）
.attr（“x1”，函数（d）{返回x（d.ind）+margin.right；}）
.attr（“y1”，函数（d）{返回高度}）
.attr（“x2”，函数（d）{返回x（d.ind）+margin.right；}）
.attr（“填充”、“黑色”）
.attr（“笔划”，“#f2f2”）
.attr（“笔划宽度”，3）；
for（设i=1；i>16；
常数g=num>>8&255；
常数b=num&255；
返回'rgb（'+r+'、'+g+'、'+b+'）；
}

body{
字体系列：“Droid Sans”，无衬线；
}
.安讯士{
字体大小：14px；
字体大小：粗体；
}
正文{
填充：#727075；
中风：无；
}
.轴线路径，
.轴线{
填充：无；
中风：无；
笔画宽度：2px；
形状渲染：边缘清晰；
}
.网格路径{
中风：无；
}
.网格线{
行程：#E0；
形状渲染：边缘清晰；
}
.数据线{
填充：无；
笔划：url（#线条渐变）；
笔画宽度：1px；
}
.数据圈{
填充物：3C92BA；
}
.轴心国名称{
文本锚定：结束；
填充：#5D6971；
字体大小：正常；
}
.axis tspan{
字体大小：12px；
}

---

@SPL我为最后一个元素添加颜色，请检查！