Как добавить диаграммы на ваш сайт WordPress с помощью D3.js

Возможно, вы знакомы с термином «визуализация данных», так как он стал более популярным как в практике, так и в карьере. Есть причина, по которой эта новая область активно развивается: важно, чтобы мы постоянно узнавали больше о наших пользователях, а также показывали им данные, подтверждающие наши заявления.

Когда данные представлены четко и профессионально, их легко понять и интерпретировать. В большинстве случаев ваши пользователи — визуалы, так что есть ли лучший способ проиллюстрировать данные, чем диаграммы? D3.js, также называемый Data-Driven Documents, — отличный способ добавить диаграммы на ваш сайт WordPress.

Почему Д3?

Эта библиотека помогает дизайнерам демонстрировать данные в Интернете. Возможности безграничны, что делает эту библиотеку очень популярной. D3 можно настроить для отображения практически любого типа диаграммы, от простого до сложного или чего-то среднего. Он отлично сочетается со стандартными веб-технологиями, может манипулировать DOM, очень гибок, а диаграммы можно настраивать точно по своему вкусу.

К настоящему моменту вы, скорее всего, сталкивались с масштабируемой векторной графикой, которую часто называют SVG. Это тип формата, который создает библиотека D3. SVG хороши тем, что они небольшого размера, масштабируемы и не зависят от разрешения.

Просто для ясности: это решение не поставляется с готовыми диаграммами из коробки — вам придется придумывать свои собственные! Взгляните на галерею D3, и вы увидите много замечательных примеров, которые вас вдохновят.

Поскольку это решение с открытым исходным кодом, вам не нужно беспокоиться о лицензировании и стоимости. Поскольку это Open Source, разработка продолжается. Чтобы быть в курсе последней версии, вы можете разветвить D3 на Github.

Создание простой диаграммы D3

Теперь, когда мы знаем, насколько хорош D3, давайте что-нибудь создадим. Мы создадим простую кольцевую диаграмму, которая будет охватывать основные понятия D3.

Шаг первый: добавьте скрипты на свой сайт

Во-первых, вам нужно будет добавить скрипт D3 на ваш сайт WordPress. На веб-сайте d3 он доступен для загрузки, или вы можете напрямую перейти к последней версии. Вы заметите, что я использую уменьшенную версию для этого урока. D3, естественно, довольно мал по размеру, но минимизированный все же немного меньше — всего 148 КБ.

Далее вы создадите новый файл JavaScript, в который будет помещен сценарий пользовательской диаграммы. Дайте файлу узнаваемое имя, чтобы его было легко найти.

Очень важно, чтобы скрипт D3 вызывался перед скриптом JavaScript, относящимся к графику. Если вещи не вызываются в правильном порядке, диаграммы не будут отображаться. (Я знаю это по личному опыту, и если вы не поймете это сразу, вы, вероятно, потратите много времени, пытаясь починить то, что не сломано.)

Эти скрипты должны быть добавлены на ваш сайт после закрывающего тега body. При осмотре страницы убедитесь, что она выглядит примерно так:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Имейте в виду, что ваш путь к файлу может отличаться от этого, в зависимости от вашей файловой структуры.

Шаг второй: добавьте скрипты для создания диаграммы

Вы вообще не будете касаться файла d3.js , а будете работать только с вашим конкретным файлом диаграммы. В данном случае он называется charts.js .

Давайте разберем вещи по частям. Во-первых, создайте свою переменную и установите, что вам нужно в вашей функции. Я назову эту переменную donut .

var donut = (function(one) {
})();

Внутри фигурных скобок вы добавите информацию о размерах.

var width = 400,

height = 400,

radius = 200

Затем определите свои цвета. Как насчет серо-голубой диаграммы? Первый цвет, указанный здесь, — светло-серый, который будет цветом по умолчанию. Второй — синий цвет, который будет представлять данные.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Вам понадобятся некоторые данные, чтобы проверить это, так что давайте добавим это дальше. Для этого руководства данные жестко закодированы, но вы также можете использовать данные электронных таблиц и динамические данные с D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Теперь вы можете добавить дополнительные сведения, которые помогут определить, как будет отображаться диаграмма.

Дуга определяет внутренний радиус. Представьте себе внешний радиус диаграммы — он должен быть довольно толстым, поэтому вычитания 100 должно быть достаточно.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Это создает контейнер SVG, и #donut — это то, на что вы будете ориентироваться на своей странице, чтобы фактически отобразить диаграмму. Здесь вы начнете видеть свои цвета с предыдущего шага.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Готовый код

На всякий случай, если вы хотите сравнить то, что у вас есть, с образцом, вот полный фрагмент кода.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Просмотр диаграммы

Вам нужно будет создать новую страницу или пост, чтобы вы могли «вызвать» кольцевую диаграмму, чтобы увидеть ее. Убедитесь, что вы находитесь в режиме редактирования текста.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Окно просмотра и соотношение сторон к таблице размеров

В теге SVG есть кое-что еще, а именно viewBox и preserveAspectRatio . Это не было создано D3, и это совершенно необязательно. У вас может быть другой предпочтительный метод изменения размера, но он, как правило, работает хорошо и помогает с отзывчивостью диаграмм.

Особенно в этом случае, поскольку мы хотим сохранить идеально круглую форму, установка соотношения сторон гарантирует, что SVG масштабируется в соответствии с размерами. Здесь в игру вступает viewBox . Преимущество viewBox в том, что он определяет, как все измерения и координаты, используемые внутри SVG, должны быть масштабированы, чтобы соответствовать доступному пространству. Если вы также используете 400 в качестве измерения, вот краткое объяснение того, как сохранить круглую форму.

У нас есть два одинаковых значения 400; причина этого в том, что изображение правильно масштабируется. С нашим viewBox="0 0 400 400" мы создаем систему координат для графики. Это 400 единиц в ширину и 400 единиц в высоту. Ширина и высота SVG-графики определяют видимую область, а настройка viewBox позволяет указать, что ваша графика может растягиваться, чтобы соответствовать определенному контейнеру (скорее всего, область просмотра по умолчанию, которая является частью веб-страницы, доступной пользователю). в настоящее время см.).

Это еще немного, потому что даже с определенным viewBox он все равно не будет идеально масштабироваться. Он не будет искажен, что хорошо, но это еще не все. Познакомьтесь с ведомым, preserveAspectRatio AspectRatio. Это не имеет никакого эффекта, если нет viewBox , который определяет соотношение сторон изображения. Масштаб будет скорректирован, чтобы сохранить соотношение сторон, чтобы вы могли сохранить идеально круглую диаграмму. При включении preserveAspectRatio вы планируете случаи, когда viewBox не соответствует соотношению сторон области просмотра или контейнера, в котором находится диаграмма. В большинстве случаев по умолчанию изображение будет масштабироваться до тех пор, пока оно не будет соответствовать как высоте, так и ширине, но центрирует себя в любом дополнительном пространстве. Мы включили preserveAspectRatio="xMidYMid" , который указывает браузеру центрировать графику в окне просмотра в обоих направлениях.

Самый важный вывод — знать, что графика не будет обрезана и что она масштабируема. Ключом к пониманию этого является экспериментирование со значениями. Хороший способ сделать это — посмотреть, что происходит, когда значения изменяются, и как это относится к области просмотра.

Поддержка браузера и d3

Скорее всего, вы используете современный браузер, но стоит упомянуть, если вам нужно поддерживать старые браузеры. В целом поддержка браузеров великолепна, и вы, вероятно, не столкнетесь с какими-либо проблемами, но D3.js плохо работает со старыми браузерами, такими как IE8.

Создание простой диаграммы — отличный способ начать работу с D3.js. Знание основ и знакомство с начальными диаграммами D3 будет очень полезно для вас при разработке данных и переходе к другим типам диаграмм. От простого к сложному, варианты дизайна бесконечны.

Как сложилась ваша диаграмма? Дайте нам знать об этом в комментариях!

Что дальше?

Загрузите эту электронную книгу, чтобы получить список наших наиболее рекомендуемых плагинов для разработчиков! Мы обнаружили, что все эти плагины просты в использовании, не слишком требовательны к производительности вашего сайта и совершенно надежны.

Готовы установить свой новый любимый плагин? Нажмите ниже!