D3 - визуальная библиотека JS на основе операций данных. Чтобы понять D3, мы начинаем с самого основного отображения загружаемых данных.
Я не скажу много о основных рамках HTML, я сначала поставлю код, а затем объясню это:
Создайте новый справочник тестирования и создайте демо -демо и D3 в этом каталоге. Демонстрация хранит файл HTML, который будет написан, и D3 хранит D3.v3.js
Создайте новый indexp.html в демо-папке, скопируйте следующий код и дважды щелкните, чтобы открыть эффект в браузере.
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> D3: Стиль параграфов условной type = "text/javascript"> var dataSet = [5, 10, 15, 20, 25]; d3.select ("body"). selectall ("p") .data (dataSet) .Enter () .append ("p") .Text (function (d) {return "i может рассчитывать на" + d;}) .Style ("color", function (d) {if (d> 15) {// prophold из 15 return "; </script> </body> </html>Функции, реализованные этой простой демонстрацией: добавьте теги P в корпус, добавьте текстовое содержимое, загружаемое D3 в тег P, и отрегулируйте цвет текста в соответствии с условиями настройки функции.
Приведенный выше код веб -страницы и код JS в теле представляют собой операции данных, отображаемые на странице. Для многих примеров в будущем просто изменить эту часть, а другие части можно рассматривать как рамки страниц.
В предыдущей статье здесь обычно рассказывается об использовании соединения D3 для подключения пошаговых операций данных одного и того же объекта для удобного обслуживания.
D3. Select («Body») выберите элемент тела и объедините его к следующему методу
.selectall ("p") выберите все абзацы
.data (набор данных) анализирует данные массива загрузки. Длина массива составляет 5. Каждый, кто объединяется, будет выполнен пять раз в будущем. Выполните операции метода на элементах массива в последовательности в соответствии с подписанием массива.
.Enter () создает элемент заполнителя для новых связанных данных (эквивалентно созданию 5 временно неизвестных тегов).
Количество созданных чисел должно быть определена на основе количества выбранных существующих тегов и длины загруженного массива данных.
Как и в этом примере, если в организме меньше 5 P, он будет создан (теперь P в теле - 0, так что 5 созданы).
Если есть больше, чем это не создано, общее количество последнего элемента заполнителя и P -элемента должно быть 5.
.append ("p") изменить элемент заполнителя на элемент P
.Text (function (d) {}) Напишите анонимную функцию для управления отображением содержимого каждого абзаца, обычно возвращая строку. В этом методе вы все равно можете написать.
Этот пример позволяет ему выводить, я могу подсчитать до каждого абзаца плюс соответствующее значение элемента массива
Формат функции фиксирован. Только таким образом данные могут быть загружены в функцию.
.style ("color", "") Устанавливает атрибут цвета текста CSS. Как и текст, набор строк может быть выполнена с функцией для выполнения нужных операций. В этом примере, если соответствующее входящее значение абзаца больше 15
Наконец, эффект, который мы видим, как показано на рисунке:
Эта статья заканчивается этой статьей. Ниже приведено, как нарисовать круги в SVG и простую силовую диаграмму, соединяющие круги.