有没有办法在d3中向饼图添加高亮

有没有办法在d3中向饼图添加高亮

本文介绍了有没有办法在d3中向饼图添加高亮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望我使用正确的术语,但基本上我想在D3中的饼图的顶部创建高亮。我已经看到很多东西用于添加阴影,但已经无法使这项工作的亮点。所以,我试图在图表顶部添加一个弧,并添加一个高斯模糊,但它有两个问题:它不会转换与图表的其余部分,突出显示在图表上方,我可以'

I hope I'm using the correct term, but basically I am trying to create highlight along the top of a pie chart in D3. I've seen lot's of things for adding drop shadows but have been unable to make that work for a highlight. So, I tried adding an arc on top of the chart and adding a gaussian blur to it, but there are 2 issues with it: it doesn't transition with the rest of the chart and the highlighting extends above the chart, I can't seem to get it to stay within the edges of the chart.

这里有一个例子:

我用来尝试添加突出显示的代码如下:

The code I'm using to try to add the highlighting is as follows:

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)");

有没有办法不添加额外的弧?

Is there a way to do this without adding the extra arc? Or at least get it to transition like the drop shadow does?

推荐答案

您可以在一个过滤器中执行此操作。在计算阴影后,您可以返回到源图,创建高亮,并结合高光和阴影在源上。这是你的阴影过滤器编辑添加一个突出。

You can do it all in one filter. After you calculate your drop-shadow, you can go back to the sourcegraphic, create a highlight and combine both the highlight and the drop-shadow on the source. Here's your drop shadow filter edited to add a 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");

这篇关于有没有办法在d3中向饼图添加高亮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-02 02:23