title: How to add drop shadow to d3.js pie or donut chart
body: <p>I am using d3.js to make a simple donut chart.</p>
  
  <p>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:</p>
  
  <pre><code>path {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
  }
  </code></pre>
  
  <p>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? </p>
  
  <p>Really appreciate the help on such a basic problem. Matt</p>
  
  <pre><code>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);
  </code></pre>