Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

I found both of them works in my test:

    .on("mouseover",         function() {             d3.select(this)                 .select("text")                 .style("fill","red");         }) 

or

    .on("mouseover",         function() {             d3.select(this)                 .select("text")                 .attr("fill","red");         }) 
like image 300
Hanfei Sun Avatar asked Aug 06 '12 22:08

Hanfei Sun


People also ask

What does ATTR do in d3?

attr() function is used to set the attribute of the element that is selected. The name of the attribute and value of the attributes are to be set using this function.

What do the select () and selectAll () functions in d3 do?

d3. select selects the first matching element whilst d3. selectAll selects all matching elements. Both functions take a string as its only argument.

What type does d3 Select Return?

For example, d3. select returns a selection with one group containing the selected element: var selection = d3. select("body");


1 Answers

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.

like image 163
Andrew Avatar answered Sep 20 '22 04:09

Andrew