Как создать многострочный график в d3.js, где данные каждой строки извлекаются из отдельного CSV? - PullRequest
0 голосов
/ 16 февраля 2019

Я стремлюсь создать простую многострочную диаграмму с использованием 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

Единственные столбцы, которые меня интересуют для создания диаграммы, - это первые два, где:

  1. первый столбец - это строка, котораяэто дата и времяэто представляет собой координаты X каждой точки на линии.Я предполагаю, что это нужно будет преобразовать из строки в unix, чтобы получить легко отображаемые значения X.
  2. второй столбец в виде int и представляет координаты Y каждой точки на линии.

Таким образом, взятие первых двух столбцов из одной строки в CSV дает нам один(x, y) координата от одной линии до графика через d3.js.И один CSV дает нам все (X, Y) координаты одной линии для построения через d3.js.

Мне удалось сделать это (небрежно), используя Python и Matplotlib, но не могу напрямую перевестиэто в d3, так как я очень новичок в этом.Это моя реализация на python, если она помогает или кому-то любопытно:

https://pastebin.com/9Eu9nwzp

Если кто-то может дать некоторое представление или краткий (надеюсь) фрагмент, который может выполнить эту задачу построения диаграмм в d3.JS для HTML-документа, который был бы прекрасен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...