如何在d3中为Svg添加滤镜效果

时间:2014-05-30 21:07:45

标签: d3.js

<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格式。

1 个答案:

答案 0 :(得分:2)

您必须首先从第一个SVG中删除viewBox属性,将其包装在html中,然后使用d3添加另一个包含动画的svg标记。此外,您必须按照之前的说法添加您想要属性filter=url(#i1)的圈子。

我制作了一个codepen来演示它如何与this d3 example一起使用。 Take a look at it, works perfectly