Question

I am using d3.js to make a simple donut chart.

I’m failing to achieve a drop-shadow or box-shadow effect to add some depth to the chart. I’ve tried adding the css:

path {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

To path tags and the g tags, but to no avail. Does anybody know if this is possible with CSS or know of a wordaround of some sort?

Really appreciate the help on such a basic problem. Matt

var data = [0, 35, 65];

var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
   ir = r * 0.5,
   color = d3.scale.category20(),
   donut = d3.layout.pie().sort(null),
   arc = d3.svg.arc().innerRadius(ir).outerRadius(r);

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
   .attr("height", h)
.append("svg:g")
   .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var arcs = svg.selectAll("path")
    .data(donut(data))
.enter().append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

Answer 1

You can use svg filters, here’s one example showing how to apply a blur filter.

An example of a dropshadow svg filter can be seen here. Combine the two examples to get what you need.