svg - Is there a way to add a highlight to pie chart in d3? -


i hope i'm using correct term, trying create highlight along top of pie chart in d3. i've seen lot's of things adding drop shadows have been unable make work highlight. so, tried adding arc on top of chart , adding gaussian blur it, there 2 issues it: doesn't transition rest of chart , highlighting extends above chart, can't seem stay within edges of chart.

here's example: http://jsfiddle.net/hf3adsj5/

the code i'm using try add highlighting follows:

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)"); 

is there way without adding arc? or @ least transition drop shadow does?

you can in 1 filter. after calculate drop-shadow, can go sourcegraphic, create highlight , combine both highlight , drop-shadow on source. here's drop shadow filter edited add highlight.

var filter = defs.append("filter")     .attr("id","drop-shadow");  filter.append("fegaussianblur")     .attr("in","sourcealpha")     .attr("stddeviation",3)     .attr("result","blur"); filter.append("feoffset")     .attr("in","blur")     .attr("dx",3)     .attr("dy",3)     .attr("result","offsetblur"); filter.append("feoffset")     .attr("in", "sourcegraphic")     .attr("dx",3)     .attr("dy",3)     .attr("result","plainoffset"); filter.append("fecomposite")     .attr("operator","out")     .attr("in","sourcegraphic")     .attr("in2","plainoffset")     .attr("result","prehighlight"); filter.append("fecolormatrix")     .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","prehighlightwhite"); filter.append("fegaussianblur")     .attr("stddeviation",3)     .attr("result","prehighlightblur"); filter.append("fecomposite")     .attr("operator","in")     .attr("in2","sourcegraphic")     .attr("result","highlight"); filter.append("fecomposite")     .attr("operator","over")     .attr("in2","sourcegraphic")     .attr("result","final"); filter.append("fecomposite")     .attr("operator","over")     .attr("in2","offsetblur")     .attr("result","finalwithdrop"); 

Comments

Popular posts from this blog

tcpdump - How to check if server received packet (acknowledged) -