d3.js
Создание надежного, отзывчивого и многоразового использования (r3) для d3

Вступление

Участок рассеяния

В этом примере содержится более 1000 строк кода (слишком много для включения здесь). По этой причине весь код доступен на http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (альтернативно размещен на https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Обратите внимание: bl.ocks.org использует iframe, поэтому, чтобы увидеть изменение размера, вам нужно щелкнуть по кнопке open (нижний правый угол iframe). Поскольку существует много кода, он был разбит на несколько файлов, и соответствующий сегмент кода будет ссылаться как по имени файла, так и по номеру строки. Пожалуйста, откройте этот пример, когда мы пройдем его.

Что делает график?

Есть несколько основных компонентов, которые входят в любой полный график; а именно:

• заглавие
• оси
• метки осей
• данные

Существуют и другие аспекты, которые могут быть включены в зависимости от графика - например, легенда диаграммы. Однако многие из этих элементов можно обойти с помощью всплывающей подсказки. По этой причине существуют элементы интерактивного графика - например, кнопки для переключения между данными.

Поскольку содержимое нашего графика будет интерактивным, было бы целесообразно, чтобы диаграмма была динамичной - например, при изменении размера окна измените размер. SVG является масштабируемым, поэтому вы можете просто масштабировать диаграмму, сохраняя текущую перспективу. Однако, в зависимости от установленной перспективы, диаграмма может стать слишком малой, чтобы ее можно было читать, даже если для диаграммы все еще достаточно места (например, если ширина больше высоты). Поэтому может быть предпочтительнее просто перерисовать диаграмму в оставшемся размере.

В этом примере будет рассмотрен вопрос о том, как динамически рассчитывать размещение меток кнопок, заголовков, осей, осей, а также массивы данных с различными объемами данных

Настроить

конфигурация

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

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

• файлы (хранит строку, в которой хранятся наши данные диаграммы)
• document_state (какая кнопка в данный момент выбрана для нашей диаграммы)
• chart_ids (html ids для диаграмм, которые мы сделаем)
• svg (параметры для svg, например, размер)
• plot_attributes
  • title (установить различные атрибуты шрифта)
  • tooltip (установить различные свойства стиля подсказки)
  • оси (задаются различные атрибуты шрифта)
  • кнопки (установить различные атрибуты шрифта и стиля)
• участки
  • разброс (установить различные аспекты нашего графика рассеяния, например, радиус точки)
• цвета (для конкретной цветовой палитры)

Вспомогательные функции

В дополнение к настройке этих глобальных аспектов нам необходимо определить некоторые вспомогательные функции. Их можно найти в helpers.js

• ajax_json (загрузка json файлов либо синхронно, либо асинхронно)
• keys (возвращает ключи данного объекта - эквивалент d3.keys ())
• parseNumber (общий синтаксический анализ чисел, если мы не знаем, какой тип или число)
• typeofNumber (возврат номера)

index.html

Наконец, мы должны настроить наш html-файл. Для целей этого примера мы поместим нашу диаграмму в тег section где id соответствует идентификатору, указанному в файле конфигурации (строка 37). Поскольку проценты действуют только в том случае, если они могут быть рассчитаны из их родительского элемента, мы также включаем некоторые базовые стили (строки 19-35)

Создание нашего участка рассеяния

Давайте откроем make_scatter_chart.js . Теперь давайте обратим пристальное внимание на строку 2, где предопределены многие из наиболее важных переменных:

• svg - d3 выбор диаграммы svg
• chart_group - d3 выбор группы внутри svg, в которой будут размещены данные
• canvas - основные аспекты экстракта svg для удобства
• поля - поля, которые мы должны учитывать
• maxi_draw_space - самые большие значения x и y, в которых мы можем нарисовать наши данные
• doc_state - текущее состояние документа, если мы используем кнопки (в данном примере мы)

Возможно, вы заметили, что мы не включили svg в html. Поэтому, прежде чем мы сможем сделать что-либо с нашей диаграммой, нам нужно добавить svg в index.html если он еще не существует. Это достигается в файле make_svg.js функцией make_chart_svg . Глядя на make_svg.js мы видим, что мы используем parseNumber вспомогательной функции в конфигурации диаграммы для ширины и высоты svg. Если число представляет собой поплавок, ширина и высота svg пропорциональны ширине и высоте его секции. Если число является целым числом, оно просто установит его в эти целые числа.

Линии 6 - 11 тестов, чтобы увидеть - в действительности - если это первый вызов или нет, и устанавливает chart_group (и состояние документа, если это первый вызов).

Строка 14-15 извлекает выбранные данные нажатием кнопки; строка 16 устанавливает data_extent . Хотя d3 имеет функцию для извлечения объема данных, я предпочитаю хранить объем данных в этой переменной.

Линии 27 - 38 содержат магию, которая устанавливает нашу диаграмму, делая поля, кнопки, заголовок и оси. Все они динамически определены и могут показаться немного сложными, поэтому мы будем смотреть на каждого по очереди.

make_margins (в make_margins.js)

Мы видим, что объект полей учитывает некоторое пространство слева, справа, сверху и снизу диаграммы (x.left, x.right, y.top, y.bottom соответственно), заголовок, кнопки и оси.

Мы также видим, что поля осей обновляются в строке 21.

Почему мы это делаем? Хорошо, если мы не укажем количество тиков, тик указывает размер галочки и размер шрифта метки галочки, мы не смогли рассчитать размер, который нужен оси. Даже тогда нам все равно придется оценивать пространство между метками и тиками. Поэтому проще сделать некоторые фиктивные оси, используя наши данные, посмотреть, насколько велики соответствующие элементы svg, а затем вернуть размер.

Нам нужна только ширина оси y и высота оси x, которая хранится в осях.y и axes.x.

Когда мы установили наши значения по умолчанию, мы затем вычислим max_drawing_space (строки 29-34 в make_margins.js)

make_buttons (в make_buttons.js)

Функция создает группу для всех кнопок, а затем группу для каждой кнопки, которая, в свою очередь, хранит круг и текстовый элемент. Строка 37 - 85 рассчитывает положение кнопок. Он делает это, видя, что текст справа от длины каждой кнопки больше, чем пространство, разрешенное для рисования (строка 75). Если это так, он отбрасывает кнопку вниз по строке и обновляет поля.

make_title (в make_title.js)

make_title аналогичен make_buttons тем, что он автоматически разбивает заголовок вашего графика на несколько строк и, если нужно, переносит перенос. Это немного хаки, поскольку у него нет сложности схемы переноса переносов TeX, но он работает достаточно хорошо. Если нам нужно больше строк, чем один, поля обновляются.

С установленными кнопками, заголовком и полями мы можем сделать наши оси.

make_axes (в make_axes.js)

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

Наконец, наш график рассеяния

Когда все это сделано, мы можем, наконец, сделать наш разброс. Так как наши наборы данных могут иметь различное количество точек, нам нужно принять это во внимание и задействовать события входа и выхода d3 соответственно. Получение количества уже существующих точек выполняется в строке 40. Оператор if в строке 45-59 добавляет больше элементов круга, если у нас больше данных или переходы дополнительных элементов в угол, а затем удаляются, если их слишком много.

Как только мы узнаем, что у нас есть правильное количество элементов, мы можем перевести все остальные элементы в их правильное положение (строка 64)

Наконец, мы добавляем всплывающую подсказку в строки 67 и 68. Функция всплывающей подсказки находится в make_tooltip.js

График Box и Whisker

Чтобы показать значение создания обобщенных функций, подобных тем, что были в предыдущем примере (make_title, make_axes, make_buttons и т. Д.), Рассмотрите эту диаграмму и диаграмму вискеров: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Хотя код для создания ящиков и усов более интенсивный, чем просто размещение точек, мы видим, что одни и те же функции работают отлично.

Барная диаграмма

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248