-1
バブルグラフを描画するのにD3.jsを使用しています。 SVGサークルの上部にシャドーエフェクトを追加したい。 しかし、フィルタを使って影を追加すると、影がすべての辺に追加されます。私はちょうどのようなトップでそれを持つことができますどのようにD3 - バブルチャートの上部にのみシャドウを追加
：ここ
Expected:
Current:
は、htmlファイルのコードです：
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style>
.inner-point{
width: 20px;
height: 10px;
background: white;
}
.header{
//margin-top:100px;
}
#left,#right{
border:2px solid #78A9A9;
}
#right{
border-left: none;
}
.head-top{
color:#78A9A9;
}
.right{
text-align: center;
margin-right: -17px;
width: 460px;
}
.text-center{
text-align: center;
padding-right: 0px;
padding-left: 0px;
}
.link{
position: relative;
margin: 396px;
bottom: 0px;
color:#A37512;
}
.left-circle,.right-circle{
padding-left: 0px;
padding-right: 0px;
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="header">
<div class="left-circle col-sm-5">
<svg id="left" width="458" height="500">
<defs>
<linearGradient id="gradient1" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#0365C0" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#51A7F9" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="gradient2" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#773F9B" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#885CB2" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<filter id="drop-shadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
<feMerge><feMergeNode in="offsetBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge></filter>
</defs>
<g class="node" transform="translate(197.1414719461316,229)">
<circle class="shadowed" id="Provider25S1511" r="131.42764796408775" onclick="demo('Provider25S151','Amount of Spend $49979.62',1,262.14147194613156,327);" stroke="#0365C0" stroke-width="1" style="filter: url("#drop-shadow"); fill: url("#gradient1");"></circle>
<clipPath id="clip-Provider25S151"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Provider25S151">
</use></clipPath>
</g>
</svg>
</div>
</div>
</body></html>
CSSのドロップシャドウを使用します（たとえば）へ
を変更 –