CODEWITHSUNDEEP
d3.js
user3084017
user3084017

Reputation: 177

How to add filters effects to Svg in d3

<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");

how can I Add this filter to svg circle.

How can I use this filter effect in Svg(D3). CanI use it directly or I have change to D3 format.

Upvotes: 0

Views: 1861

Answers (1)

David Lemon
David Lemon

Reputation: 1570

You have to remove the viewBox attribute first from your first SVG, wrap it around an html and then with d3 you can add another svg tag containing your animation. Also you have to add to the circles you want the attribute filter=url(#i1) as told before.

I made a codepen to demonstrate how it works with this d3 example. Take a look at it, works perfectly.

Upvotes: 2

Related Questions