<svg viewBox = "0 0 1100 400" version = "1.1">
<desc>
Filter example
</desc>
<filter id = "i1">
<feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur1"/>
<feSpecularLighting result = "specOut" in = "blur1" specularExponent = "20" lighting-color = "#bbbbbb">
<fePointLight x = "50" y = "100" z = "200"/>
</feSpecularLighting>
<feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" k1 = "0" k2 = "1" k3 = "1" k4 = "0"/>
</filter>
var svg=svg.selectAll(".circle")
.data(this.Data)
.enter().append("circle")
.attr("class", "circle")
.attr("r",function(d) {return r(Math.sqrt( d[2]));})
.attr("cx", function(d) { return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); })
.style("fill","blue");
如何将此过滤器添加到svg圈。
如何在Svg(D3)中使用此滤镜效果。 我可以直接使用它,或者我已经改为D3格式。
答案 0 :(得分:2)
您必须首先从第一个SVG中删除viewBox
属性,将其包装在html中,然后使用d3添加另一个包含动画的svg标记。此外,您必须按照之前的说法添加您想要属性filter=url(#i1)
的圈子。
我制作了一个codepen来演示它如何与this d3 example一起使用。 Take a look at it, works perfectly。