title: Is there a way to add a highlight to pie chart in d3?
body: <p>I hope I'm using the correct term, but basically I am trying to create highlight along the top of a pie chart in D3. I've seen lot's of things for adding drop shadows but have been unable to make that work for a highlight. So,  I tried adding an arc on top of the chart and adding a gaussian blur to it, but there are 2 issues with it: it doesn't transition with the rest of the chart and the highlighting extends above the chart, I can't seem to get it to stay within the edges of the chart.</p>
  
  <p>Here's an example: <a href="http://jsfiddle.net/hf3adsj5/" rel="nofollow">http://jsfiddle.net/hf3adsj5/</a></p>
  
  <p>The code I'm using to try to add the highlighting is as follows:</p>
  
  <pre><code>var arc2 = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(Math.PI/4)
      .endAngle(-7/12*Math.PI);
  
  var filter2 = defs.append("filter")
      .attr("id","highlight");
  
  filter2.append("feGaussianBlur")
      .attr("in","SourceAlpha")
      .attr("stdDeviation",2)
      .attr("result","blur");
  filter2.append("feColorMatrix")
      .attr("in", "blur")
      .attr("type", "matrix")
      .attr("values", "0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0")
      .attr("result", "whiteblur");
  filter2.append("feOffset")
      .attr("in","whiteblur")
      .attr("dx",3)
      .attr("dy",3)
      .attr("result","offsetBlur");
  
  var feMerge2 = filter2.append("feMerge");
  
  feMerge2.append("feMergeNode")
      .attr("in","offsetBlur");
  feMerge2.append("feMergeNode")
      .attr("in","SourceGraphic");
  
  svg.append("path")
      .attr("d",arc2)
      .style("filter","url(#highlight)");
  </code></pre>
  
  <p>Is there a way to do this without adding the extra arc? Or at least get it to transition like the drop shadow does?</p>