如何在d3.js中修改圆弧的阴影？

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500);

var arc = d3.arc()
            .innerRadius(50)
            .outerRadius(100)
            .startAngle(0)
            .endAngle(Math.PI);

var defs = svg.append("defs");
var filter = defs.append("filter")
                 .attr("id", "shadow")
                 .attr("x", "-50%")
                 .attr("y", "-50%")
                 .attr("width", "200%")
                 .attr("height", "200%");

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

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

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

svg.append("path")
   .attr("d", arc)
   .attr("fill", "steelblue")
   .attr("filter", "url(#shadow)");