CODEWITHSUNDEEP
cssd3.jsdropshadowdc.js
user2109069
user2109069

Reputation: 15

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

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

Upvotes: 0

Views: 1426

Answers (1)

DJ Martin
DJ Martin

Reputation: 2579

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.

Upvotes: 1

Related Questions