D3根据情况用不同的颜色填充区域

Question

Please click here to see sample graph

嗨，

我正在使用Angular 8和D3版本4图形。

我有一种情况，我必须根据两个不同的轴的条件来绘制具有3种不同颜色的d3区域。

我尝试了3种方法 1.创建3个不同的区域-但是我们找不到线和轴的匹配点。 2.根据条件，具有3种不同颜色的单个区域–条件填充不适用于该区域。而且线性渐变无法预测停止偏移。 3.颜色叠加层-看起来不太好，并且也存在一些问题。

在上图中，我们有两个轴Min和Max。

3个条件如下 1.最大面积以上的线应为绿色。 2.在两个轴之间应为白色。 3.在分钟以下，它应该是红色。

如果有人在这种情况下工作并且对此有所了解，请帮助我。

预先感谢

Answer 1

据我了解，您想基于某个y值填充区域。

使用path元素 fill 属性，您可以轻松实现以下目标：

一些实现以上目的的最小代码：

   // Add the line
    svg
        .append("path")
        .datum(cdata)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
            .x(function(d) { return x(d.key) })
            .y(function(d) { return y(d.value) })
        );


    // Add the green regions
    svg.append("path")
        .datum(cdata)
        .attr("fill", '#BFB')
        .attr("stroke", "none")
        .attr("stroke-width", 1)
        .attr("d", d3.area()
            .x(function(d,i) { return x(d.key) })
            .y0(function(d) { return y(0) })
            .y1(function(d) { if (d.value>0) {return y(d.value)}else{return y(0)} })
        );

    // Add the red regions
    svg.append("path")
        .datum(cdata)
        .attr("fill", '#FBB')
        .attr("stroke", "none")
        .attr("stroke-width", 1)
        .attr("d", d3.area()
            .x(function(d,i) { return x(d.key) })
            .y0(function(d) { return y(0) })
            .y1(function(d) { if (d.value<0) {return y(d.value)}else{return y(0)} })
        );