Есть ли способ добавить подсветку в круговую диаграмму в 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");