Предположительно, причина cities
undefined
в том, что ваш оператор console.log
находится где-то за пределами функции обратного вызова, предоставленной d3.tsv
. Если вы внимательно посмотрите на код Майка, вы заметите, что третий аргумент d3.tsv
- это функция, которая принимает в качестве аргумента объект ошибки и обработанные данные. Внутри этой функции он определяет переменную cities
, поэтому, если вы поместите console.log(cities)
где-нибудь за пределами этой функции, cities
будет undefined
.
Теперь о формате данных. Если вы посмотрите дальше в этом блоке, то увидите еще один файл: data.tsv. В нем четыре столбца: дата, Нью-Йорк, Сан-Франциско, Остин. d3.tsv
создаст массив, в котором каждый элемент в массиве соответствует одной строке в TSV (за исключением строки заголовка). Каждая строка преобразуется в простой объект JavaScript со свойствами, соответствующими столбцам файла. Этот массив передается в обратный вызов как переменная data
в этом блоке. Итак, data[0]
будет
{
"date": "20111001",
"New York": "63.4",
"San Francisco": "62.7",
"Austin": "72.2"
}
Когда переменная cities
определена, этот массив преобразуется в массив, содержащий по одному элементу на город, и каждый объект, представляющий город, содержит данные временного ряда температуры для этого города. Таким образом, переменная cities
будет выглядеть так:
[
{
"id": "New York",
"values": [
{"date": Date 2011-10-01T00:00:00, "temperature": 63.4},
{"date": Date 2011-10-02T00:00:00, "temperature": 48.0},
...
]
},
{
"id": "San Francisco",
"values": [...]
},
{
"id": "Austin",
"values": [...]
}
]
Вероятно, стоит указать здесь на второй аргумент d3.tsv
в этом примере: функцию type
. Здесь все строки преобразуются в объекты Date
или Number
. Без этого аргумента все значения свойств в data
были бы строками.
Дополнительную информацию о том, как работает d3.tsv
, можно найти в документации по d3-request.
ПРЕДОСТЕРЕЖЕНИЕ: этот блок предназначен для d3v4, последняя версия d3 - v5. В версии 5 не рекомендуется использовать d3-request в пользу d3-fetch. d3-fetch предоставляет почти такой же набор утилит для получения данных, но вместо использования функций обратного вызова они возвращают Обещания.
person
darth_mall
schedule
26.05.2018