Я стремлюсь создать простую многострочную диаграмму с использованием d3.js, что-то вроде следующего по природе:
https://beta.observablehq.com/@mbostock/d3-multi-line-chart
Я нашел несколько замечательных примеров, которые показывают, каксделать это, когда все данные находятся в одном CSV.Вот один из примеров:
http://bl.ocks.org/asielen/44ffca2877d0132572cb
Хотя у меня есть немного более неясное требование для случаев использования.У меня есть каталог в корне моего проекта, называемый «data», и в этой папке есть произвольное количество csvs.Итак, папка моего проекта выглядит примерно так:
project_root/
index.html
data/
csv1.csv
abc2.csv
meow.csv
.
.
.
woof.csv
Каждый из этих CSV-файлов содержит данные для одной строки, которую я хотел бы отобразить на графике.Каждый CSV также имеет следующие столбцы:
str(representing a datetime) int float int string float
Единственные столбцы, которые меня интересуют для создания диаграммы, - это первые два, где:
- первый столбец - это строка, котораяэто дата и времяэто представляет собой координаты X каждой точки на линии.Я предполагаю, что это нужно будет преобразовать из строки в unix, чтобы получить легко отображаемые значения X.
- второй столбец в виде int и представляет координаты Y каждой точки на линии.
Таким образом, взятие первых двух столбцов из одной строки в CSV дает нам один(x, y) координата от одной линии до графика через d3.js.И один CSV дает нам все (X, Y) координаты одной линии для построения через d3.js.
Мне удалось сделать это (небрежно), используя Python и Matplotlib, но не могу напрямую перевестиэто в d3, так как я очень новичок в этом.Это моя реализация на python, если она помогает или кому-то любопытно:
https://pastebin.com/9Eu9nwzp
Если кто-то может дать некоторое представление или краткий (надеюсь) фрагмент, который может выполнить эту задачу построения диаграмм в d3.JS для HTML-документа, который был бы прекрасен.