what's the difference between selection.style and selection.attr in D3.js?

Question

I found both of them works in my test:

    .on(\"mouseover\",
        function() {
            d3.select(this)
                .select(\"text\")
                         


        

Answer 1

It depends slightly on the svg object that you make in d3.

When you want to make a circle element for example then it will have an 'x', 'y' and 'r' attribute (attr) that define the shape and the location of the circle element. You can style the circle with things like opacity, fill color, etc.

Attributes usually denote the size and shape of an svg object while style usually indicates more designy aspects of the svg objects that you use in your visualisation.

Answer 2

If you look at the HTML you get, you'll see something like:

<text style="fill: red">...

and

<text fill="red">...

..which are both legal in SVG, but using attr when you need style could trip you up if you use it for something else.