Разбор только часа

Question

Разбор только часа

1

Я использую d3 v3 для анализа некоторых внутридневных данных, которые имеют следующий формат:

time,value
09:00,1
09:05,2
09:10,3
...

Поэтому я настроил переменную синтаксического анализа так:

var parseTime = d3.time.format("%H:%M").parse;

И я сопоставляю данные в рамках вызова csv:

d3.csv("my_data.csv", function(error, rawData) {
    var data = rawData.map(function(d) {
        return {y_value: +d.value, date: parseTime(d.time)}
    });

    console.log(data)
}

В консоли у меня что-то странное. Вместо часа я получаю полноценную дату, день недели, месяц, даже часовой пояс.

data->
array[79]
    0:Object->
        date: Mon Jan 01 1900 09:00:00 GMT+0000
        y_value: 1

Должны ли даты быть заполнены? Полагаю, это могло объяснить, почему я закончил с понедельника 1 января, похоже, что это дефолт. Однако, согласно документации времени d3, "%H:%M" используется в течение нескольких часов и минут. И я мог бы поклясться, что сделал это очень правильно.

Я знаю, что что-то не совсем правильно, потому что мой графический граф бросает ошибку:

error: <path> attribute d: expected number "MNaN"

Лучше всего предположить, что дата переопределена, а axis() ожидает часовой формат.

Мой вопрос: почему мои данные не обрабатываются только час? Должен ли я изменить это с конца синтаксического анализа? Если это не вариант, могу ли я, чтобы домен x прочитал часть даты (час и минута)?

Обновление: вот минимальный блок для дальнейшей иллюстрации моего бедствия.

Arash Howaida 07 нояб. 2017, в 17:02

Источник

2

Привет Arash - .parse вернет объект даты, и да, по умолчанию будет 01.01.1900, если не указано во входящих данных. Это будет хорошо, но вам нужно будет поделиться своим кодом для функции масштабирования и пути, чтобы мы могли видеть, где находится ошибка.
Tom Shanley 07 нояб. 2017, в 20:08
0

Действительно, без масштаба и линейного генератора мы не можем найти проблему. Тем не менее, я считаю, что ваша главная проблема здесь концептуальная ... посмотрите на мой ответ.
Gerardo Furtado 08 нояб. 2017, в 00:12

Теги:

javascript

d3.js

datetime

1 ответ

Ещё вопросы

Привет Arash - .parse вернет объект даты, и да, по умолчанию будет 01.01.1900, если не указано во входящих данных. Это будет хорошо, но вам нужно будет поделиться своим кодом для функции масштабирования и пути, чтобы мы могли видеть, где находится ошибка.
Действительно, без масштаба и линейного генератора мы не можем найти проблему. Тем не менее, я считаю, что ваша главная проблема здесь концептуальная ... посмотрите на мой ответ.

Gerardo Furtado · Accepted Answer · 2017-11-07T22-20-00.000Z

Когда ты сказал...

почему мои данные не обрабатываются только час?

... становится очевидным, что здесь есть основное недоразумение. Позвольте пояснить это.

Что такое дата?

Проще говоря, дата - это момент времени. Это может быть или два месяца назад, или день рождения моего сына, или следующее Рождество, или момент, когда Сократ выпил болиголов. Это не важно. Важно понимать, что все эти даты имеют столетие, десятилетие, год, месяц, день, час, минуту, секунду, миллисекунду и т.д.... (конечно, эти имена являются соглашениями, которые может быть изменено).

Поэтому мало смысла иметь дату только с часом, или только час и минуту.

Анализ и формирование

Когда вы разбираете строку, вы создаете объект даты. Как мы объясняли выше, этот объект даты соответствует моменту времени, и он будет иметь год, месяц, час, часовой пояс и т.д. Если в самой строке не хватает какой-либо информации, например, год, то она по умолчанию будет иметь какое-то значение.

Посмотрите на эту демонстрацию, мы проанализируем строку в объект даты, используя правильный спецификатор:

var string = "09:00";
var parser = d3.timeParse("%H:%M");
var date = parser(string);
console.log("The date object is: " + date);

<script src="https://d3js.org/d3.v4.min.js"></script>

Как вы можете видеть, теперь у нас есть объект даты. Кстати, вы можете видеть, что он по умолчанию используется для данного года (1900), данного месяца (январь) и т.д....

Однако в вашей диаграмме вам не нужно показывать весь объект, то есть всю информацию об этом моменте времени. Например, вы можете показывать только час и минуту. Мы отформатируем эту дату.

Посмотри:

var string = "09:00";
var parser = d3.timeParse("%H:%M");
var format = d3.timeFormat("%H:%M");
var date = parser(string);
console.log("The date object is: " + date);
console.log("The formatted date is: " + format(date));

<script src="https://d3js.org/d3.v4.min.js"></script>

Эта форматированная дата полезна для создания осей, всплывающих подсказок, текстов и т.д., Т. Е. Показывает дату, которую вы показываете, не показывая все ее детали. Вы можете выбрать, какую информацию вы хотите показать пользователю (только год, или только месяц, или, возможно, день-месяц-год, независимо от того).

Это разница между разбором и форматированием.

Зачем использовать форматтер?

Чтобы закончить, вы можете спросить: зачем я использую форматировщик, если в итоге у меня будет то же самое, что у меня было в начале?

Ответ таков: у вас нет того же. Теперь у вас есть дата, а не строка. И, используя дату с временной шкалой, вы можете разместить летнее время, високосные годы, февраль всего лишь 28 дней, то есть кучу вещей, которые невозможно сделать с простой строкой.

PS: Демонстрации выше используют D3 v4.

EDIT: после вашего обновления мы можем легко увидеть проблему с вашим кодом: вам нужно передать массив в range().

var xScale = d3.time.scale().range([0,width]);

Вот обновленный bl.ocks: http://bl.ocks.org/anonymous/a05e15339f7792f175d2bcebccf6bbed/7f23db481f1308eb0d5a1834f7cbc0b17d948167

Ваш ответ проясняет ситуацию настолько, что я неправильно понял, как работает форматирование даты. Спасибо за подробное прохождение. Я обновил пост минималистским блоком для справки. Я хотел бы сказать, что правильно выполнил вашу процедуру форматирования времени, но все равно получаю эту ошибку пути.
Ваша проблема здесь гораздо проще: диапазон должен быть массивом. Вот обновленный bl.ocks: bl.ocks.org/anonymous/a05e15339f7792f175d2bcebccf6bbed/…