2

I'm trying to create blurred arcs using d3. I'm creating the arcs and applying the feGaussianBlur filter. However, when I use too high of a standard deviation, the blur seems to run into the bounds of the container created for the arc.

Increasing the overall container size does not affect the individual arcs. Is it possible to increase the size of the arc's container? 

var svgContainer = d3.select(".rainbow").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

//Define Arc 
var arc = d3.arc()
    .innerRadius(50)
    .outerRadius(55)
    .startAngle(-2)
    .endAngle(2)

// Container for the gradient
var defs = svgContainer.append("defs");

// Filter for the glow
var filter = defs.append("filter")
    .attr("id","glow");
filter.append("feGaussianBlur")
    .attr("stdDeviation","10");


//Adding arc
var path = svgContainer.selectAll("g.arc")
    .data('foo')
    .enter().append("g")
    .attr("class", "arc");
//Adding to path
path.append("path")
    .attr("d", arc)
    .style("filter", "url(#glow)");

I would like the blur to extend as far as it needs to but it is restrained by some container, forming a box around the arc and cutting off the blurred edge.

Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
mwessel
  • 21
  • 1
  • You need to set the filter region to be larger than the default, see [this question](https://stackoverflow.com/q/17883655/7106086), which will solve your problem, [here's a fiddle](https://jsfiddle.net/0wzjf8pc/) applying it. – Andrew Reid Jun 12 '19 at 19:27

0 Answers0