Ошибка при открытии многосерийной линейной диаграммы от Майка Босктока.

Я практикую d3 на примере Майка Бостока: https://bl.ocks.org/mbostock/3884955 < / а>

Хотелось бы посмотреть, как будет выглядеть созданный им сериал - «Города».

Я открыл html-файл с помощью локального сервера Python и в консоли написал console.log (cities); но это не сработало. 'console.log (данные);' тоже не сработало. Все они показали это сообщение об ошибке:

VM100:1 Uncaught ReferenceError: cities is not defined
    at <anonymous>:1:13

Я не вносил никаких изменений в его код. Поэтому я не думаю, что в коде есть ошибка. Я предполагаю, что проблема связана с настройкой d3? Итак, я попытался открыть файл в Firefox, и я также загрузил d3, но эти два способа также не сработали.

Кто-нибудь случайно знает, в чем причина проблемы? Если кто-то может объяснить, как выглядят «города» в его коде, то добро пожаловать!

Большое спасибо,


person Brian    schedule 26.05.2018    source источник


Ответы (1)


Предположительно, причина 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
comment
Привет, @darth_mall, спасибо за ответ. Мне было интересно, не является ли структура данных, которую вы показали, тем, как «данные» анализируются через d3.tsv? Меня смутило, если переменная «города» определяется по-другому? в частности, чтобы уничтожить три города / цвета? - person Brian; 27.05.2018
comment
@ Сью, хорошо, извини, что я неосторожно ответил. Формат данных, которые я показал, - это структура аргумента data, который передается в обратный вызов для d3.tsv. Строка, в которой Майк Босток присваивает значение cities, он переформатирует данные. Я дополню свой ответ этими подробностями. - person darth_mall; 31.05.2018