Используя точку в выборе (D3.js)

Question

Я нашел много кода, который использует точку внутри кронштейна, как это:

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

Может кто-то помочь мне с объяснением этой точки?

Благодарности

Answer 1

svg.selectAll(".circles") будут выбраны все элементы в SVG, которые имеют класс circles. Таким образом, . в основном указывает, что вы хотите выбрать на основе имени класса.

Выполнение чего-то вроде svg.selectAll("circle") выберет все circle элементов внутри вашего svg. Это основано на имени внутри тега. Например, если у вас есть следующий код ниже, он будет выбирать оба круга.

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

Другой пример, чтобы объяснить немного лучше:

Допустим, мы имеем следующий код

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

В случае, описанном выше, если я svg.selectAll(".red"), я выберу первый g элемент потому что он имеет имя класса red.

Однако, если я сделаю svg.selectAll("g"), он выберет как g элементов, так и не беспокоиться о названии класса. Этот тип фильтрации без . основан исключительно на имени элемента.