d3.js d3用渐变填充区域

brjng4g3 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(301)

我想用渐变填充此折线图的区域，以便渐变的底部是透明的，而区域填充的顶部是黑色的。这可能吗？
我所有的谷歌搜索都是带出这样的图表：http://bl.ocks.org/d3noob/4433087-我不希望渐变基于值，在这个例子中，我希望红色穿过区域的顶部，而不仅仅是当值达到该%时。
第一个
https://jsfiddle.net/5kesyqu0/3/

d3.js

来源：https://stackoverflow.com/questions/35833781/d3-filling-an-area-with-a-gradient

2条答案

按热度按时间

polhcujo1#

您可以通过如下所示的线性渐变来实现这一点：

//make defs and add the linear gradient
var lg = svgmain.append("defs").append("linearGradient")
.attr("id", "mygrad")//id of the gradient
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "0%")
.attr("y2", "100%")//since its a vertical linear gradient 
;
lg.append("stop")
.attr("offset", "0%")
.style("stop-color", "red")//end in red
.style("stop-opacity", 1)

lg.append("stop")
.attr("offset", "100%")
.style("stop-color", "blue")//start in blue
.style("stop-opacity", 1)

然后将此渐变添加到路径的填充中。

svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area)
        .style("fill", "url(#mygrad)");//id of the gradient for fill

工作代码here。
另一个例子是requirement（* 这样渐变的底部是透明的，而区域填充的顶部是红色的 *）。

赞(0）回复(0）举报 2022-11-12

lnxxn5zx2#

我可能会迟到，但我最近想达到的结果是一样的。在浏览互联网时，我发现了这个问题，并决定发布我自己的答案。看起来还没有人发布过这个解决方案。所以，这里开始：

let svgDefs = svg.append('defs');    

let filterBlur = svgDefs
    .append("filter")
    .attr('id', 'blur')
    .attr("x", "0")
    .attr("y", "0")
    .append("feGaussianBlur")
    .attr("in", "SourceGraphic")
    .attr("stdDeviation", 20);

let mask = svgDefs
    .append("mask")
    .attr('id', 'mask')
    .datum(data)
    .append("path")
    .attr("fill", "#fff")
    .attr("d", d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.value); }));

svg.append("path")
    .datum(data)
    .attr("stroke", "#274EF6")
    .attr("stroke-width", 15)
    .attr("fill", "none")
    .attr("filter", "url(#blur)")
    .attr("mask", "url(#mask)")
    .attr("class", "line-blur")
    .attr("d", d3.svg.line()
        .x(function (d) {
            return x(d.date);
        })
        .y(function (d) {
            return y(d.value);
        }));

基本思路是不使用面积图，而是使用线宽很宽的折线图，然后应用模糊效果，再应用蒙版属性，蒙版的路径将由该区域创建，我们在第一步中丢弃了该区域。希望对大家有帮助