D3.js - Выборы

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

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

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

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

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

Метод select ()

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

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

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

Выбор по тегу

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

d3.select(“div”)

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

<!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>

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

Выбор по имени класса

Элементы HTML, стилизованные с использованием классов CSS, можно выбрать с помощью следующего синтаксиса.

d3.select(“.<class name>”)

Создайте веб-страницу «select_by_class.html» и добавьте следующие изменения:

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

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

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

Выбор по ID

Каждый элемент на HTML-странице должен иметь уникальный идентификатор. Мы можем использовать этот уникальный идентификатор элемента для доступа к нему с помощью метода select (), как указано ниже.

d3.select(“#<id of an element>”)

Создайте веб-страницу «select_by_id.html» и добавьте следующие изменения.

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

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

Запрашивая веб-страницу через браузер, вы увидите на экране следующий результат.

Добавление элементов DOM

Выбор D3.js предоставляет append() и text()методы для добавления новых элементов в существующие HTML-документы. В этом разделе подробно рассказывается о добавлении элементов DOM.

Метод append ()

Метод append () добавляет новый элемент в качестве последнего дочернего элемента в текущем выделении. Этот метод также может изменять стиль элементов, их атрибуты, свойства, HTML и текстовое содержимое.

Создайте веб-страницу «select_and_append.html» и добавьте следующие изменения:

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

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

Здесь метод append () добавляет новый диапазон тегов внутри тега div, как показано ниже -

<div class = "myclass">
   Hello World!<span></span>
</div>

Метод text ()

Метод text () используется для установки содержимого выбранных / добавленных элементов. Давайте изменим приведенный выше пример и добавим метод text (), как показано ниже.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Теперь обновите веб-страницу, и вы увидите следующий ответ.

Здесь приведенный выше сценарий выполняет операцию связывания. D3.js разумно использует технику, называемуюchain syntax, который вы можете узнать по jQuery. Объединив методы вместе с точками, вы можете выполнять несколько действий в одной строке кода. Это быстро и легко. Тот же сценарий может также получить доступ без синтаксиса цепочки, как показано ниже.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Изменение элементов

D3.js предоставляет различные методы, html(), attr() и style()для изменения содержимого и стиля выбранных элементов. Давайте посмотрим, как использовать методы изменения в этой главе.

Метод html ()

Метод html () используется для установки содержимого html выбранных / добавленных элементов.

Создайте веб-страницу «select_and_add_html.html» и добавьте следующий код.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

Запрашивая веб-страницу через браузер, вы увидите на экране следующий результат.

Метод attr ()

Метод attr () используется для добавления или обновления атрибута выбранных элементов. Создайте веб-страницу «select_and_modify.html» и добавьте следующий код.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Запрашивая веб-страницу через браузер, вы увидите на экране следующий результат.

Метод style ()

Метод style () используется для установки свойства стиля выбранных элементов. Создайте веб-страницу «select_and_style.html» и добавьте следующий код.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

Запрашивая веб-страницу через браузер, вы увидите на экране следующий результат.

Метод classed ()

Метод classed () используется исключительно для установки атрибута «class» элемента HTML. Поскольку один элемент HTML может иметь несколько классов; нам нужно быть осторожными при назначении класса элементу HTML. Этот метод знает, как обрабатывать один или несколько классов элемента, и он будет производительным.

  • Add class- Чтобы добавить класс, второй параметр классифицированного метода должен иметь значение true. Это определено ниже -

d3.select(".myclass").classed("myanotherclass", true);

  • Remove class- Чтобы удалить класс, второй параметр классифицированного метода должен иметь значение false. Это определено ниже -

d3.select(".myclass").classed("myanotherclass", false);

  • Check class- Чтобы проверить наличие класса, просто оставьте второй параметр и передайте имя класса, который вы запрашиваете. Это вернет истину, если она существует, и ложь, если нет.

d3.select(".myclass").classed("myanotherclass");

Это вернет истину, если какой-либо элемент в выборе имеет класс. Использоватьd3.select для выбора одного элемента.

  • Toggle class - Чтобы перевести класс в противоположное состояние - удалите его, если он уже существует, добавьте его, если он еще не существует - вы можете выполнить одно из следующих действий.

    Для одного элемента код может выглядеть, как показано ниже -

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

Метод selectAll ()

Метод selectAll () используется для выбора нескольких элементов в документе HTML. Метод select выбирает первый элемент, но метод selectAll выбирает все элементы, которые соответствуют определенной строке селектора. Если выбор не соответствует ни одному, возвращается пустой выбор. Мы можем связать все добавляемые методы модификации,append(), html(), text(), attr(), style(), classed(),и т.д., также в методе selectAll (). В этом случае методы повлияют на все совпадающие элементы. Давайте разберемся, создав новую веб-страницу «select_multiple.html» и добавив следующий скрипт -

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

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Запрашивая веб-страницу через браузер, вы увидите на экране следующий результат.

Здесь метод attr () применяется как к div и h2 tag и цвет текста в обоих тегах изменится на красный.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved