Учебники

D3.js – Выборы

Выбор является одним из основных понятий в D3.js. Он основан на селекторах CSS. Это позволяет нам выбрать один или несколько элементов на веб-странице. Кроме того, это позволяет нам изменять, добавлять или удалять элементы по отношению к предварительно определенному набору данных. В этой главе мы увидим, как использовать выборки для создания визуализаций данных.

D3.js помогает выбирать элементы со страницы HTML, используя следующие два метода:

  • select () – выбирает только один элемент DOM, сопоставляя данный CSS-селектор. Если для данного селектора CSS более одного элемента, он выбирает только первый.

  • selectAll () – выбирает все элементы DOM, сопоставляя данный CSS-селектор. Если вы знакомы с выбором элементов с помощью jQuery, селекторы D3.js почти одинаковы.

select () – выбирает только один элемент DOM, сопоставляя данный CSS-селектор. Если для данного селектора CSS более одного элемента, он выбирает только первый.

selectAll () – выбирает все элементы DOM, сопоставляя данный CSS-селектор. Если вы знакомы с выбором элементов с помощью jQuery, селекторы D3.js почти одинаковы.

Давайте рассмотрим каждый из методов подробно.

Метод select ()

Метод select () выбирает элемент HTML на основе CSS-селекторов. В селекторах CSS вы можете определить и получить доступ к HTML-элементам следующими тремя способами:

  • Тег элемента HTML (например, div, h1, p, span и т. Д.)
  • Имя класса элемента HTML
  • Идентификатор элемента HTML

Давайте посмотрим на это в действии с примерами.

Выбор по тегу

Вы можете выбрать элементы HTML, используя его TAG. Следующий синтаксис используется для выбора элементов тега «div»,

d3.select(“div”)

Пример – создайте страницу «select_by_tag.html» и добавьте следующие изменения,

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

Запрашивая веб-страницу через браузер, вы увидите на экране следующую информацию: