d3 SelectAll против JQuery селектора

Question

из документации:

d3.selectAll (селектор)

Выбирает все элементы, которые соответствуют указанному селектору. Элементы будут выбраны в порядке обхода документа (сверху вниз). Если никакие элементов в текущем документе не совпадают с указанным селектором, возвращает пустой выбор.

Сейчас на практике:

<div class="nv-series"></div> 
<div class="nv-series"></div> 
<div class="nv-series"></div> 

сценарий:

console.log(d3.selectAll(".nv-series").length); 
console.log($(".nv-series").length); 

d3 журналы 1! и jquery 3!

Возможно, это нормально, но я не понимаю. Может кто-нибудь объяснить, почему d3 logs 1?

Answer 1

Не следует использовать .length - использовать .size(), как в:

console.log(d3.selectAll(".nv-series").size()); 

Выбор d3 (результат d3.selectAll) представляет собой массив из массивов. Как это бывает (в вашем случае), длина 3, которую вы ожидаете, может быть получена с d3.selectAll(".nv-series")[0].length. Но избегайте этого. Причины этого представления выходят за рамки этой дискуссии. Но дело в том, что, возможно, в отличие от jQuery, представление массива выбора d3 считается внутренним, поэтому избегайте делать какие-либо операции с массивом (например, проверку .length). Вместо этого используйте методы api, такие как .size(), .node(), .empty() и т. Д.