有没有办法在 d3 中为饼图添加高亮显示？答案

【问题标题】：Is there a way to add a highlight to pie chart in d3?有没有办法在 d3 中为饼图添加高亮显示？
【发布时间】：2015-06-06 11:24:43
【问题描述】：

我希望我使用了正确的术语，但基本上我试图在 D3 中的饼图顶部创建突出显示。我见过很多添加阴影的方法，但无法将其用作高光。因此，我尝试在图表顶部添加弧线并为其添加高斯模糊，但存在两个问题：它不会与图表的其余部分一起过渡，并且突出显示在图表上方，我可以'似乎无法让它停留在图表的边缘。

这是一个例子：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)");

有没有办法在不添加额外弧的情况下做到这一点？或者至少让它像投影一样过渡？

【问题讨论】：

饼图过渡效果如何？你能创建一个重新创建问题的 jsFiddle 或 Plunker 吗？

标签： svg d3.js svg-filters

【解决方案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");

【讨论】：