Using a dot in the selection (D3.js)

Question

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

Answer 1

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.