如何將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」