How to add a drop shadow to dc.js bar chart rects

Question

how can i add a drop shadow to a dc.js bar chart?

I've looked at svg filters but not sure how i could apply that to a dc.js chart. I've been looking at http://bl.ocks.org/cpbotha/5200394 example to add drop shadow defs but cant see how you can add the defs to the chart rect.bars.

I'm pretty new to d3.js etc so any help would be greatly appreciated. thanks

Answer 1

Here is an example of applying a filter to a dc chart: http://jsfiddle.net/djmartin_umich/5Lvcq/

I simply added the code that Lars referred to after the dc.renderAll().

First retrieve the chart svg:

 var defs = rowChart.svg().append("defs");

Next define the filter:

var filter = defs.append("filter")
        .attr("id", "drop-shadow")
        .attr("height", "150%")
        .attr("width", "200%");

    filter.append("feGaussianBlur")
        .attr("in", "SourceAlpha")
        .attr("stdDeviation", 5)
        .attr("result", "blur");

    filter.append("feOffset")
        .attr("in", "blur")
        .attr("dx", 5)
        .attr("dy", 5)
        .attr("result", "offsetBlur");

    var feMerge = filter.append("feMerge");

    feMerge.append("feMergeNode")
        .attr("in", "offsetBlur");
    feMerge.append("feMergeNode")
        .attr("in", "SourceGraphic");

Finally, apply the filter to the rows:

    rowChart.selectAll("rect")
        .style("filter", "url(#drop-shadow)");

Hopefully the example at http://jsfiddle.net/djmartin_umich/5Lvcq/ helps you get going.