我希望我使用的是正确的术语,但基本上我是想在 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)");
有没有办法在不添加额外弧线的情况下做到这一点?或者至少让它像投影一样过渡?
最佳答案
您可以在一个过滤器中完成所有操作。计算阴影后,您可以返回源图形,创建高光并在源上组合高光和阴影。这是为添加高光而编辑的投影过滤器。
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");
关于svg - 有没有办法在 d3 中为饼图添加高亮显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29397152/