Давайте посмотрим, как сделать линейный график с помощью библиотеки d3.js.
Предпосылки
Итак, я собираюсь нарисовать линейный график на основе исторических данных по акциям apple.inc за последние шесть месяцев. Я загрузил данные в виде файла CSV, формат CSV выглядит следующим образом.
Давайте построим линейный график на основе данных даты и конечного баланса. Основная цель этой реализации - более подробно разобраться в d3 на примере. Я делю нашу реализацию линейной диаграммы на несколько этапов, чтобы вы могли понять ее более тщательно.
Этапы реализации
Разделим этапы создания линейного графика на разные подэтапы.
Во-первых, начните с основных HTML-тегов и импорта зависимой библиотеки. Затем мы настроим холст для рисования диаграммы, настроив поля, ширину и высоту. После этого сделаем обе оси и нарисуем диаграммы. Наконец, мы добавим указатель мыши на события для всплывающей подсказки на линейном графике.
Шаг 1. Создайте тело HTML
Во-первых, давайте создадим тело HTML, которое содержит базовый набор тегов HTML с холстом SVG. Наша линейная диаграмма создана под холстом SVG. В HTML-файле холст SVG определяется между <svg></svg> элементами. Далее мы хотим включить d3 в проигрываемом HTML-файле. Для этого нужно импортировать библиотеку d3 поверх файла HTML.
Следующий фрагмент кода показывает объяснение вышеизложенного.
<!DOCTYPE html> <html> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script> //here comes your linchart script </script> </body> </html>
Шаг 2. Добавьте поля для пространства SVG.
Итак, теперь наш холст SVG готов поиграть с диаграммой с помощью D3. Теперь приступим к кодированию d3. Сначала давайте определим масштаб нашего холста SVG, такой как высота, ширина, поля. Размер нашей диаграммы последовал.
var margin = { top: 30, right: 120, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
tooltip = { width: 100, height: 100, x: 10, y: -30 };
Теперь наши размеры полей готовы. Давайте применим его к нашему холсту SVG с помощью d3. Для этого мы используем d3.select модуль. d3.select выполнит поиск по вашему HTML и найдет соответствующий элемент.
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Приведенная выше строка кода добавит элемент SVG в ваш HTML-файл и применит ширину, высоту и поля для элемента SVG.
d3.select - очень важный модуль в d3.js. Это очень необходимый модуль для преобразования на основе данных.
Шаг 3: проанализируйте данные CSV.
Теперь наш холст SVG готов. Прежде чем мы собираемся построить линейную диаграмму, нам нужно проанализировать данные из файла CSV. Модуль d3.csv помогает анализировать данные из файла CSV. Ниже показан небольшой пример синтаксического анализа CSV.
var parseDate = d3.timeParse("%d/%m/%Y");
d3.csv("/data/apple-6-months-data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
});
data.sort(function(a, b) {
return a.date - b.date;
});
});
В приведенном выше фрагменте кода в первой строке мы определили формат даты в поле даты файла. Во второй строке мы анализируем CSV-файл с помощью модуля d3.csv. Функция d3.csv имеет два параметра: один - это входной файл, а другой - функция обратного вызова. D3 вызовет функцию обратного вызова после завершения анализа данных во входном файле. Если во время синтаксического анализа возникают какие-либо ошибки, ошибка появляется в error variable функции обратного вызова, а данные отображаются в переменной data.
Краткое описание приведенного выше фрагмента кода - это модуль d3.csv, анализирующий данные CSV. Если есть какое-то содержимое в переменной ошибки функции обратного вызова. Это означает, что при синтаксическом анализе возникли некоторые ошибки, а затем выдает ошибку. Если ошибки нет, то в данных будет преобразован тип данных переменной данных из строки в дату. Для этого мы определили формат даты в parseDate variable. Переберите полные данные по data variable, затем он получит date variable, проанализирует ее и преобразует в формат даты, а затем добавит ее в переменную даты. Итак, теперь все типы данных переменных даты становятся датами.
Функция data.sort сортирует данные в data переменной по дате.
Шаг 4. Создайте ось для диаграммы
На предыдущем шаге мы увидели, как анализировать данные в файле CSV. На этом этапе давайте разберемся, как построить оси x и y на основе наших данных CSV.
В D3 было множество служебных функций, облегчающих построение вашей диаграммы. В d3 также есть несколько модулей для изготовления оси. Давайте узнаем, как сделать ось для нашего линейного графика
var dateFormatter = d3.timeFormat("%d/%m/%Y");
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x)
.tickFormat(dateFormatter);
var yAxis = d3.axisLeft()
.scale(y)
.tickFormat(d3.format("$.2f"))
Приведенный выше фрагмент кода составляет ось нашей диаграммы. Переменная x определяет масштаб по оси X, который представляет собой шкалу времени, и ее диапазон составляет от нуля до ширины холста SVG. Переменная y представляет собой масштаб по оси Y и представляет собой линейный формат и его диапазон от высоты холста до нуля.
Здесь, надеюсь, вы заметили в переменной x диапазон масштабирования от 0 до ширины, но в случае переменной y масштаб составляет от высоты холста до 0. Почему это происходит? Позиция (0,0) находится в верхнем левом углу. Но наша точка обзора диаграммы становится левым верхним углом (0, высота). Ось X от линии от 0 до ширины холста, а ось Y от высоты до 0 точек.
Переменные xAxis и yAxis определяют ось для нашей диаграммы. Итак, здесь переменная xAxis определяет положение оси вниз, ее масштаб или ширина становятся равными 0 до ширины холста (которая определяется в переменной x), а формат деления диапазона - это формат даты на основе значения переменной dateFormatter. Для переменной yAxis, расположенной в левом углу, ее масштаб основан на переменной y, а формат yAxis - «$ .2f», что означает число с плавающей запятой с двумя десятичными точками и символом $ впереди.
Полное объяснение приведенного выше фрагмента кода показано ниже.
Здесь вы можете увидеть, что я сделал дополнительный код в функции обратного вызова синтаксического анализа csv. Первое изменение - это определение домена для переменных x и y. Домен в том смысле, что актуальное представление данных в соответствующем масштабе. Итак, здесь переменная x объясняет ось x, длина которой составляет от 0 до ширины холста, и она представляет диапазоны дат от минимальной даты данных за последние 6 месяцев до максимальной даты данных за последние 6 месяцев.
Кроме того, переменная y объясняет ось Y, которая выровнена по левой стороне холста, и ее высота такая же, как высота холста, а диапазон составляет от минимального до максимального значения 6-месячных данных, который определяется d3.extent module. Наконец, деления оси представлены в формате символа $ с двумя десятичными числами с плавающей запятой.
Наконец, приведенный ниже блок кода объясняет расположение оси на диаграмме SVG.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number of Likes");
Шаг 5. Создайте линейную диаграмму
Наш холст готов, ось готова, теперь давайте сделаем линейное представление на основе данных. В нашем базовом объяснении SVG мы обсуждаем создание линейного пути. Это делается с помощью использования the <path></path> с атрибутом d. внутри атрибута d объясняется путь к данным. Библиотека D3 предоставляет модуль d3.line для создания пути данных для линии.
В нашем примере нам нужно создать путь к данным, основанный на дате и балансе на конец периода. Это можно сделать с помощью следующего фрагмента кода.
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
Приведенный выше фрагмент кода создает путь к данным на основе даты и конечного баланса.
Шаг 5. Создайте событие при наведении указателя мыши
Теперь мы переходим к последним шагам, которые добавляют события наведения курсора мыши на нашу линейную диаграмму. Для этого нам нужно создать прямоугольное наложение на нашем холсте SVG. Если пользователь наведет указатель мыши на этот оверлей, то узнает значение положения оси x с помощью функции x.invert. После этого найдите положение даты пополам для соответствующей оси x и, наконец, получите данные конечного баланса в соответствующем диапазоне дат, которые отображаются в виде всплывающей подсказки.
Вот фрагмент кода для объяснения выше.
var bisectDate = d3.bisector(function(d) { return d.date; }).left;
....
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
focus.select(".tooltip-date").text(dateFormatter(d.date));
focus.select(".tooltip-likes").text(formatValue(d.close));
}
Миссия по объяснению линейного графика завершена. Ниже показан полный рабочий код нашей линейной диаграммы.
Вывод приведенного выше кода объясняется ниже.
Следуйте за нами в LinkedIn: DevelopersCoffee
Следуйте за нами в Twitter: DevelopersCoffee
Отправьте свою историю по адресу: https://www.jotform.com/build/203200537740444 или напишите письмо: [email protected]
