Nvd3.js 两条线之间的填充区域

为这样一个基本的问题道歉。可能是要填充两条线之间的区域吗

例如，我有历史上的高温/低温数据。我想在这两个时间序列之间创建一个阴影区域

我尝试过使用线形图的面积功能，如下所示：

return [
    {
        values: tsData.normal,
        key: 'Historical Normal',
        classed: 'dashed'
    },
    {
        area: true,
        values: tsData.hi,
        key: 'Historical Max',
        color: '#0000ff'
    },
    {
        area: true,
        values: tsData.low,
        key: 'Historical Min',
        color: '#ffffff',
        fillOpacity: 1
    }
];

这将产生此图像：

---

请注意，历史最小线下方的网格线被填充区域隐藏。这个解决方案有点老套和丑陋。有更直接的方法吗？

我通过使用d3绘制一个区域获得了更好的解决方案

首先，我创建了一个数组（我称为areaData），它合并了tsData.hi和tsData.low。对于我推送的每个数据点，例如： {x:“x值”，y0:“tsData.hi中的y值”，y1:“tsData.low中的y值”}

然后，我根据图表的比例定义了x和y比例：

var x = chart.xScale();
var y = chart.yScale();

然后，我添加了一个面积定义作为

var area = d3.svg.area()
    .x(function (d) { return x(d.x); })
    .y0(function (d) { return y(d.y0); })
    .y1(function (d) { return y(d.y1); });

接下来，我使用以下方法绘制该区域：

d3.select('.nv-linesWrap')
    .append("path")
    .datum(areaData)
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "#AEC7E8")
    .style("opacity", .2);

这将获得一个外观更好的解决方案。因为nvd3会在调整窗口大小时更新图表。我将该区域的绘图包装在函数中。这样，在移除之前绘制的区域时，当窗口调整大小时，我可以调用该函数，如下所示：

var drawArea = function () {
    d3.select(".area").remove();
    d3.select('.nv-linesWrap')
        .append("path")
        .datum(areaData)
        .attr("class", "forecastArea")
        .attr("d", area)
        .style("fill", "#AEC7E8")
        .style("opacity", .2);
}
drawArea();

nv.utils.windowResize(resize);

function resize() {
    chart.update();

    drawArea();
}

我还禁用了使用图例打开和关闭该系列，因为我没有处理该案例：

chart.legend.updateState(false);

结果是：