Javascript d3.js圆环图-将阴影添加到突出显示的部分

在我的项目中，我使用d3.js圆环图来显示一些数据。单击每个弧段时，它将高亮显示。要求是在单击时向突出显示的部分添加一个阴影效果，这样它将更加突出显示。我正在使用笔划创建阴影效果，但它看起来不像阴影

D3JS示例
var lastSelected=“”；
var firstSelected=“”；
可变宽度=450
高度=450
保证金=40
变量半径=数学最小值（宽度、高度）/2-边距
var normalArc=d3.arc（）.outerRadius（半径-30）、innerRadius（半径-70）；
var biggerArc=d3.arc（）.outerRadius（半径-80）。innerRadius（半径-10）；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var data={a:9，b:20，c:30，d:8，e:12}
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”、“#6b486b”、“#a05d56”]）
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）
var data_ready=pie（d3.条目（数据））
svg
.selectAll（'whatever'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，normalArc）
.attr（'fill'，函数（d）{return（color（d.data.key））}）
.样式（“不透明度”，0.7）
.attr（'d'，函数（d，索引）{
//如果这是第一段，则使其成为更宽的圆弧
如果（索引==0）{
firstSelected=这个；
返回biggerrc（d）；
}否则{
返回正常弧（d）；
}
}).打开（“单击”，功能（d）{
如果（第一次选择）{
d3.选择（第一个选择）.attr（“d”，normalArc）.样式（“笔划宽度”，“0px”）
firstSelected=false；
}
如果（上次选中）{
d3.选择（lastSelected）.attr（“d”，normalArc）.style（“笔划宽度”，“0px”）
}
d3.选择（this）.attr（“d”，biggerrc）.style（“笔划”，“黑色”）.style（“笔划宽度”，“10px”）
.style（“笔划不透明度”，“0.08”）
.style（'笔划位置'，“外部”）
.style（'paint-order'，'stroke'）
.style（'笔划-线条连接'，“圆形”）
lastSelected=此；
})

经过几个小时的搜索，我终于找到了答案。我们需要为放置阴影创建过滤器，并将其附加到svg中，您只需在其中添加过滤器作为属性

D3JS示例
var lastSelected=“”；
var firstSelected=“”；
可变宽度=450
高度=450
保证金=40
变量半径=数学最小值（宽度、高度）/2-边距
var normalArc=d3.arc（）.outerRadius（半径-30）、innerRadius（半径-70）；
var biggerArc=d3.arc（）.outerRadius（半径-80）。innerRadius（半径-10）；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
/*对于放置阴影过滤器*/
var defs=svg.append（“defs”）；
var filter=defs.append（“filter”）
.attr（“id”、“dropshadow”）
filter.append（“feGaussianBlur”）
.attr（“in”，“SourceAlpha”）
.attr（“stdDeviation”，4）
.attr（“结果”、“模糊”）；
filter.append（“feOffset”）
.attr（“in”，“blur”）
.attr（“dx”，2）
.attr（“dy”，2）
.attr（“结果”、“抵销模糊”）；
var feMerge=filter.append（“feMerge”）；
feMerge.append（“feMergeNode”）
.attr（“in”，“offsetBlur”）
feMerge.append（“feMergeNode”）
.attr（“in”，“SourceGraphic”）；
var data={a:9，b:20，c:30，d:8，e:12}
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”、“#6b486b”、“#a05d56”]）
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）
var data_ready=pie（d3.条目（数据））
svg
.selectAll（'whatever'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，normalArc）
.attr（'fill'，函数（d）{return（color（d.data.key））}）
.样式（“不透明度”，0.7）
.attr（'d'，函数（d，索引）{
//如果这是第一段，则使其成为更宽的圆弧
如果（索引==0）{
firstSelected=这个；
返回biggerrc（d）；
}否则{
返回正常弧（d）；
}
}).打开（“单击”，功能（d）{
如果（第一次选择）{
d3.select（firstSelected）.attr（“d”，normalArc.attr（“filter”），attr（“filter”）；
firstSelected=false；
}
如果（上次选中）{
d3.select（lastSelected）.attr（“d”，normalArc.attr（“filter”），attr；
}
d3.选择（this.attr（“d”，biggerrc）.attr（“filter”，“url（#dropshadow）”）；
lastSelected=此；
})
如果（第一次选择）{
d3.select（firstSelected）.attr（“过滤器”、“url（#dropshadow）”）；
}

在尝试实施所需更改时，您会遇到什么具体问题？