Статьи

Включите ваш HTML5 с D3

Октябрь 31, 2018

Сила HTML5 замечательна. Я видел впечатляющие демонстрации в презентациях и великолепные примеры страниц, которые люди разрабатывали в свободное время, но это всегда выглядит очень сложно. Кроме того, примеры, как правило, являются примерами, которые практически не применяются. Здесь мы рассмотрим пример, который показывает, как D3 позволяет HTML5 обеспечивать реальную ценность для бизнеса.

D3 помогает скрыть некоторые из этих сложностей, позволяет вам работать непосредственно с наборами данных и предоставляет возможности, необходимые для быстрого применения возможностей HTML5 в реальных сценариях. Эта библиотека javascript использует стандарты HTML5 для генерации некоторых самых ярких (без Flash) визуализаций, которые я видел в библиотеке. Хотя он похож на jQuery, использование SVG делает анимацию намного более продвинутой.

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




10


18


12


24


15


13


17


8



GO


Эта анимация не использует изображения или flash, только стандарты HTML5 с помощью D3. Когда вы просматриваете источник, вы заметите, что <svg>элемент определен в размере, соответствующем ожидаемой ширине и высоте нашей гистограммы.

 

<svg id="bargraph" width="800" height="400"></svg>

Гистограмма генерируется из следующей логики:

bargraph().data([10, 18, 12, 24, 15, 13, 22, 17, 8]).plot();

Определение объекта гистограммы

Первый шаг — определить наш объект:

function bargraph() {
  var colors = ["#2d578b", "steelblue", "#777"],
    data = [10, 15, 20],
    xCoordinateSpacing = 50,
    yCoordinateSpacing = 70;

  function bargraph() {

  }

  bargraph.data = function(d) {
    data = d;
    return bargraph;
  }

  // … …
}

bargraphОбъект определяет набор атрибутов. colorsАтрибут определяет различные цвета бруски будут. dataАтрибут представляет собой массив чисел , которые будут нанесены на гистограмме. Мы можем изменить список точек данных по умолчанию, вызвав data()метод. xCoordinateSpacingИ yCoordinateSpacingатрибуты просто общие атрибуты для построения фигур последовательно.

Теперь давайте посмотрим на render()метод.

bargraph.plot = function() {
  svg = d3.select("#bargraph").append("g");

  renderDataPointsAsStrings(svg);
  renderGoButton(svg);
}

Первый шаг — определить группу внутри <svg>элемента, которая будет содержать наши SVG-фигуры. Как только группа определена, мы передаем ее методам, которые отображают наши точки данных, и кнопке «GO».

Рендеринг точек данных

Теперь давайте отрендерим точки данных.

function renderDataPointsAsStrings(svg) {
  var text = svg.selectAll("text").data(data, String);

  text.enter().append("text")
    .text(String)
    .attr("x", function(d, i) {
      return i * xCoordinateSpacing + 20;
    })
    .attr("y", yCoordinateSpacing);
}

Этот метод добавляет точки данных в качестве <text>элементов. Если вы не знакомы с синтаксисом D3, вот краткое изложение:

  • svg.selectAll(selector) — следует аналогичному синтаксису селектора в jQuery и возвращает список результатов, соответствующих вашему селектору
  • data — определяет точки данных, с которыми вы хотите работать по выбранным элементам
  • elements.enter() — для каждой точки данных будет вызываться логика ввода

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

Фактический текст, который мы собираемся показать в каждом текстовом элементе, — это сам элемент данных. Передав Stringфункцию javascript textметоду, мы указываем на это.

Мы используем из xCoordinateSpacingи yCoordinateSpacingатрибутов , чтобы определить начальные точки каждого элемента данных. Атрибут «x» — это просто вычисление, равномерно распределяющее текстовые элементы. Функции могут принимать как a, так dи iпараметр, предоставляя как саму точку данных, так и индекс точки данных соответственно.

Отображение гистограммы

Сама кнопка «GO» визуализируется renderGoButtonметодом, но после визуализации прикрепляется событие onclick, которое показывает гистограмму:

svg.selectAll(".gobutton").on("click", function() {
  showBarGraph(svg);
  // … …
});

Здесь мы выбираем селектор класса CSS и прикрепляем функцию для запуска по клику. В showBarGraph()метод выполняет магические необходимо визуализировать гистограмму:

  function showBarGraph(svg) {
    var rect = svg.selectAll("rect").data(data, String);

    rect.enter().append("rect")
      .attr("class", "bargraph")
      .attr("x", function(d, i) {
        return i * xCoordinateSpacing;
      })
      .attr("y", yCoordinateSpacing + 10)
      .attr("width", xCoordinateSpacing - 10)
      .attr("height", 0)
      .attr("fill", function(d, i) {
        return colors[i % colors.length];
      });

    svg.selectAll(".bargraph").transition().duration(1000)
      .attr("height", function(d) {
        return d * 5;
      });
  }

Здесь мы снова следуем шаблону, который мы описали ранее. Для каждой точки данных мы добавляем форму прямоугольника ниже текста, который мы визуализировали ранее. Используя атрибуты xCoordinateSpacingand yCoordinateSpacingдля вычисления атрибутов «x», «y» и «width», мы обеспечиваем согласованность расположения прямоугольников по сравнению с текстом.

Обратите внимание на использование атрибута fill. Здесь мы используем индекс каждой точки данных, чтобы варьировать цвет каждого прямоугольника на основе нашего colorsмассива. Наконец, мы применяем переход к столбцам, который заставляет их расширяться до высоты, представляющей каждую точку данных в течение 1 секунды. Мы используем самый простой переход, но с помощью метода ease () вы можете изменить стиль перехода.

Это оно! Это еще не все, когда вы просматриваете исходный код, поэтому, если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь оставлять их в комментариях Кроме того, для более сложных примеров и некоторых полезных руководств посетите веб-сайт D3 .

 

34
Share: