search

benkeen / d3pie

A configurable pie chart lib and generator built on d3.js
MIT License
371 stars 203 forks source link

Drop shadows? #139

Closed bhartvigsen closed 7 years ago

bhartvigsen commented 7 years ago

Hi sorry to bug you with an issue but I have a quick question; can you think of a way to implement SVG drop shadows (feOffset) underneath the charts using this library?

bhartvigsen commented 7 years ago

So I figured out how to add drop shadows, it's pretty straightforward DOM manipulation, adding a filter section to the \<svg> and then attaching it to the pie element with a filter attribute. Only thing I'm stuck on is that I can add the shadows manually with the developer tools but when I use jQuery to do the same thing the chart blanks out. Perhaps I need to call some sort of chart re-draw function...

EDIT: I figured it out, you can't use jQuery to manipulate SVG, but I used the Pablo library and was successfully able to add drop shadows. Here's a short example:

Pablo('#pieChart svg').append('<defs><filter id="f3" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="10" dy="10" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter></d efs>');

$('.p0_pieChart').attr('filter', 'url(#f3)');