d3.js - 着色效果在Google Chrome中無法正常工作

Question

我不是d3.js中的專家級編碼器。我創建了一個基於數據在圓圈內使用彩色圓弧的圖形。

我已經對弧線應用了着色效果，它與FireFix一起工作良好，但它也顯示弧線外的路徑（弧線）的陰影區域。

var data = [ 
    {name: "A", val: 11975}, 
    {name: "B", val: 5871}, 
    {name: "C", val: 8916} 
]; 

var w = 400, 
    h = 400, 
    r = Math.min(w, h)/2, 
    labelr = r + 30, // radius for label anchor 
    color = d3.scale.category20(), 
    donut = d3.layout.pie(), 
    arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); 

var vis = d3.select("body") 
    .append("svg:svg") 
    .data([data]) 
    .attr("width", w + 150) 
    .attr("height", h); 

// filters go in defs element 
    var defs = vis.append("defs"); 

    // create filter with id #drop-shadow 
    // height=130% so that the shadow is not clipped 
    var filter = defs.append("filter") 
     .attr("id", "drop-shadow") 
     .attr("height", "150%"); 

    // SourceAlpha refers to opacity of graphic that this filter will be applied to 
    // convolve that with a Gaussian with standard deviation 3 and store result 
    // in blur 
    filter.append("feGaussianBlur") 
     .attr("in", "SourceAlpha") 
     .attr("stdDeviation", 3) 
     .attr("result", "blur"); 

    // translate output of Gaussian blur to the right and downwards with 2px 
    // store result in offsetBlur 
    var feOffset = filter.append("feOffset") 
     .attr("in", "blur") 
     .attr("dx", 3) 
     .attr("dy", 3) 
     .attr("result", "offsetBlur"); 

    // overlay original SourceGraphic over translated blurred opacity by using 
    // feMerge filter. Order of specifying inputs is important! 
    var feMerge = filter.append("feMerge"); 

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

var arcs = vis.selectAll("g.arc") 
    .data(donut.value(function(d) { return d.val })) 
    .enter().append("svg:g") 
    .attr("class", "arc") 
    .attr("transform", "translate(" + (r + 30) + "," + r + ")"); 

arcs.append("svg:path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc) 
.style("filter", function (d,i){ return "url(#drop-shadow)" ; }); 

arcs.append("svg:text") 
    .attr("transform", function(d) { 
     var c = arc.centroid(d), 
      x = c[0], 
      y = c[1], 
      // pythagorean theorem for hypotenuse 
      h = Math.sqrt(x*x + y*y); 
     return "translate(" + (x/h * labelr) + ',' + 
      (y/h * labelr) + ")"; 
    }) 
    .attr("dy", ".35em") 

    .attr("text-anchor", function(d) { 
     // are we past the center? 
     return (d.endAngle + d.startAngle)/2 > Math.PI ? 
      "end" : "start"; 
    }) 
    .text(function(d, i) { return d.value.toFixed(2); }); 

我已經編輯了小提琴，這裏的小提琴：http://jsfiddle.net/GQDUS/368/

你可以很容易地看到在FF和谷歌瀏覽器的差異。這個你能幫我嗎。

Answer 1

可能是您沒有不支持d3過濾器屬性的最新瀏覽器版本