d3.js селектор, не возвращающий фактический объект

#d3.js

#d3.js

Вопрос:

Я использую d3.js v4. Я выполнил следующий код в консоли браузера Google Chrome.

 var theData = [ 1, 2, 3 ]

var p = d3.select("body").selectAll("p")
          .data(theData)
          .enter()
          .append("p")
          .text("hello ");

console.log(p);
  

Я ожидал такого результата:

введите описание изображения здесь

Но то, что я получаю, как показано ниже

введите описание изображения здесь

Может кто-нибудь, пожалуйста, помогите мне, почему существует эта разница?

Ответ №1:

В соответствии с API D3 4.x:

Выборки больше не относятся к подклассу Array с использованием внедрения цепочки прототипов; теперь они являются простыми объектами, что повышает производительность.

Итак, в версии D3 4.x выбранные объекты являются объектами.

Кроме того, стоит упомянуть, что вы используете сжатую версию (https://d3js.org/d3.v4.min.js ), который возвращает:

 zi {_groups: Array[1], _parents: Array[1]}
  

В обычной версии (https://d3js.org/d3.v4.js ), console.log возврат должен быть:

 Selection {_groups: Array[1], _parents: Array[1]}
  

Если вы хотите получить что-то похожее на то, что у вас было в D3 v3, используйте nodes() :

 var theData = [ 1, 2, 3 ]

var p = d3.select("body").selectAll("p")
          .data(theData)
          .enter()
          .append("p")
          .text("hello ");

console.log(p.nodes());  
 <script src="https://d3js.org/d3.v4.js"></script>