css - D3如何部分填写？

Question

我有一条曲线在斜线上方或下方运行，我想填充该线上方和曲线下方的区域，但不填充该线下方和曲线上方的区域，如左图所示。

同样，很容易像右图一样填充，但我想像左图一样填充。那么，如何去掉不需要的填充呢？

svg.append("path").attr("class", "line").attr("d", peak(pp)).style({ fill: peakColor, opacity: 0.5 });

Answer 1

好吧，这是我为自己想出的东西，以防有人关心它。

var slope = (dp.rightY - dp.leftY) / (dp.rightX - dp.leftX);  // slope of the line
var pp = [];
pp.push({ x: dp.leftX, y: dp.leftY });
var wasAbove = true;   // track if it's above the line
data.forEach(function (d) {
    if (d.x >= dp.leftX && d.x <= dp.rightX) {
        var yAtLine = (d.x - dp.leftX) * slope + dp.leftY;
        if (d.y > yAtLine) {
            if (!wasAbove)
                pp.push({ x: d.x, y: yAtLine });
            pp.push(d);
            wasAbove = true;
        } else if (wasAbove) {
            pp.push({ x: d.x, y: yAtLine });
            wasAbove = false;
        }
    }
});
pp.push({ x: dp.rightX, y: dp.rightY });
var peak = d3.svg.line().x(function (d) { return xScale(d.x) }).y(function (d) { return yScale(d.y) });
svg.append("path").attr("class", "line").attr("d", peak(pp)).style({ fill: peakColor, opacity: 0.5 });