CODEWITHSUNDEEP
javascriptd3.js
Derick Kolln
Derick Kolln

Reputation: 633

Using a dot in the selection (D3.js)

I found a lot of code that uses a dot inside the bracket like this:

var node = svg.selectAll(".circles").

Can someone help me with an explanation of that dot?­­­­­

Thanks

Upvotes: 2

Views: 2619

Answers (1)

sparta93
sparta93

Reputation: 3854

svg.selectAll(".circles") will select all elements in your SVG that have the class circles. So the . is basically to specify you want to select based on classname.

Doing something like svg.selectAll("circle") will select all circle elements inside your svg. This is based on the name inside the tag. For example if you have the following code below, it will select both circles.

<svg>
  <circle></circle>
  <circle></circle>
</svg>

Another example to explain a little better:

Lets say we have the following code

<svg> 
    <g class="red"></g>
    <g class="blue"></g>
</svg>

In the case above, if I do svg.selectAll(".red"), I will select the first g element because it has the class name red.

However, If I do svg.selectAll("g"), it will select both g elements and not worry about class name. This type of filtering without the . is solely based on the name of the element.

Upvotes: 5

Related Questions