Выбор является одним из основных понятий в 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» и добавьте следующие изменения,
<!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 () добавляет новый тег span внутри тега div, как показано ниже —
<div class = "myclass"> Hello World!<span></span> </div>
Текст () Метод
Метод 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 разумно использует технику, называемую цепочечным синтаксисом , которую вы можете узнать из 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 () используется для установки свойства стиля выбранных элементов. Создайте веб-страницу «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. Этот метод знает, как обрабатывать один или несколько классов в элементе, и он будет производительным.
-
Добавить класс — чтобы добавить класс, второй параметр классифицированного метода должен быть установлен в true. Это определено ниже —
Добавить класс — чтобы добавить класс, второй параметр классифицированного метода должен быть установлен в true. Это определено ниже —
d3.select(".myclass").classed("myanotherclass", true);
-
Удалить класс — чтобы удалить класс, второй параметр классифицированного метода должен быть установлен в false. Это определено ниже —
Удалить класс — чтобы удалить класс, второй параметр классифицированного метода должен быть установлен в false. Это определено ниже —
d3.select(".myclass").classed("myanotherclass", false);
-
Проверка класса — чтобы проверить наличие класса, просто пропустите второй параметр и передайте имя класса, к которому вы обращаетесь. Это вернет истину, если она существует, ложь, если это не так.
Проверка класса — чтобы проверить наличие класса, просто пропустите второй параметр и передайте имя класса, к которому вы обращаетесь. Это вернет истину, если она существует, ложь, если это не так.
d3.select(".myclass").classed("myanotherclass");
Это вернет true, если какой-либо элемент в выборе имеет класс. Используйте d3.select для выбора одного элемента.
-
Переключить класс — чтобы перевести класс в противоположное состояние — удалить его, если он уже существует, добавить его, если он еще не существует — вы можете выполнить одно из следующих действий.
Для одного элемента код может выглядеть так, как показано ниже —
Переключить класс — чтобы перевести класс в противоположное состояние — удалить его, если он уже существует, добавить его, если он еще не существует — вы можете выполнить одно из следующих действий.
Для одного элемента код может выглядеть так, как показано ниже —
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, а цвет текста в обоих тегах меняется на красный.