有沒有辦法在d3中添加一個高亮顯示到餅圖？

Question

我希望我使用的是正確的術語，但基本上我試圖在D3中的餅圖頂部創建高亮。我已經看到了很多關於添加陰影的東西，但一直無法使其突出顯示。所以，我嘗試在圖表頂部添加一個弧線並添加一個高斯模糊，但有兩個問題：它不會與圖表的其餘部分進行轉換，並且突出顯示會延伸到圖表上方，我可以' t似乎讓它保持在圖表的邊緣。

下面是一個例子：http://jsfiddle.net/hf3adsj5/

我使用嘗試添加高亮的代碼如下：

var arc2 = d3.svg.arc() 
    .innerRadius(innerRadius) 
    .outerRadius(outerRadius) 
    .startAngle(Math.PI/4) 
    .endAngle(-7/12*Math.PI); 

var filter2 = defs.append("filter") 
    .attr("id","highlight"); 

filter2.append("feGaussianBlur") 
    .attr("in","SourceAlpha") 
    .attr("stdDeviation",2) 
    .attr("result","blur"); 
filter2.append("feColorMatrix") 
    .attr("in", "blur") 
    .attr("type", "matrix") 
    .attr("values", "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0") 
    .attr("result", "whiteblur"); 
filter2.append("feOffset") 
    .attr("in","whiteblur") 
    .attr("dx",3) 
    .attr("dy",3) 
    .attr("result","offsetBlur"); 

var feMerge2 = filter2.append("feMerge"); 

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

svg.append("path") 
    .attr("d",arc2) 
    .style("filter","url(#highlight)"); 

有沒有辦法做到這一點無需增加額外的弧線？或者至少讓它像投影一樣轉變？

Answer 1

您可以在一個過濾器中完成所有操作。計算完投影后，您可以返回到源圖形，創建高光，並將源高光和投影組合在一起。這是您的陰影過濾器編輯添加一個突出顯示。

var filter = defs.append("filter") 
    .attr("id","drop-shadow"); 

filter.append("feGaussianBlur") 
    .attr("in","SourceAlpha") 
    .attr("stdDeviation",3) 
    .attr("result","blur"); 
filter.append("feOffset") 
    .attr("in","blur") 
    .attr("dx",3) 
    .attr("dy",3) 
    .attr("result","offsetBlur"); 
filter.append("feOffset") 
    .attr("in", "SourceGraphic") 
    .attr("dx",3) 
    .attr("dy",3) 
    .attr("result","plainOffset"); 
filter.append("feComposite") 
    .attr("operator","out") 
    .attr("in","SourceGraphic") 
    .attr("in2","plainOffset") 
    .attr("result","preHighlight"); 
filter.append("feColorMatrix") 
    .attr("type","matrix") 
    .attr("values","0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0") 
    .attr("result","preHighlightWhite"); 
filter.append("feGaussianBlur") 
    .attr("stdDeviation",3) 
    .attr("result","preHighlightBlur"); 
filter.append("feComposite") 
    .attr("operator","in") 
    .attr("in2","SourceGraphic") 
    .attr("result","Highlight"); 
filter.append("feComposite") 
    .attr("operator","over") 
    .attr("in2","SourceGraphic") 
    .attr("result","final"); 
filter.append("feComposite") 
    .attr("operator","over") 
    .attr("in2","offsetBlur") 
    .attr("result","finalWithDrop");