nvd3.js – 填充两行之间的区域

2019年7月20日 203次阅读

对这样一个基本问题表示歉意.是否可能填充两条线之间的区域？

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

我尝试过使用lineChart的区域功能：

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
    }
];

这导致此图像：

《nvd3.js – 填充两行之间的区域》

请注意,历史最小线下方的网格线被填充区域隐藏.这个解决方案有点hacky和丑陋.有没有更直接的方法来做到这一点？

最佳答案 通过使用d3绘制区域,我实现了更好的解决方案.

首先,我创建了一个合并tsData.hi和tsData.low的数组(我称之为areaData).对于每个数据点,我推动例如：
{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);

结果：

《nvd3.js – 填充两行之间的区域》

点赞