如何将outerglow添加到线

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”