我有一条在斜线上方或下方延伸的曲线,我想填充直线上方和曲线下方的区域,而不是直线下方和曲线上方的区域,如左图所示。

同样,很容易像右图一样填充,但是我想像左图那样填充。那么,如何摆脱不必要的填充呢?

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

最佳答案

好的,这是我想出的东西,以防有人关心。

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

关于css - 如何部分填写D3?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23859940/

10-13 01:54