如何为线条添加外发光

Question

我有一个如下所示的折线图：

var lines = svg.selectAll(".lines")
      .data(data_array)
      .enter()
        .append('g')
        .attr('class','lines');

    lines
      .append("path")
      .attr("d", function(d) { return line(d.values); })
      //.style('stroke', function(d) { var length = d.values.length - 1; return color(d.values[length].poll); })
      .style('fill','none')
      .style('stroke','#dc545e')
      .style("stroke-width", 3);

没关系。

但我想为每个图表添加一个外发光，这样它们就不会重叠。

这是一种方法：

var defs = svg.append("defs");

var filter = defs.append("filter")
.attr("id", "drop-shadow")
.attr("height", "130%");

// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur

var colormatrix = "0 1 1 1 1 0 1 1 1 1 0 1 1 1 1 0 1 1 1 1";
filter.append("feColorMatrix")
    .attr('type','matrix')
    //.attr("values", colormatrix);

filter.append("feGaussianBlur")
    .attr("stdDeviation", 2)
    .attr("result", "coloredBlur");

// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur

// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
    .attr("in", "coloredBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

但这并没有添加我想要的颜色。

我希望它是白色的。但是我没有运气弄清楚颜色矩阵。

有什么想法吗？

Answer 1

如果你希望它是白色的，那么你的颜色矩阵应该是：

“0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0”