Ошибка с открытием Multi-Series Line Chart от Майка Боштока - PullRequest
Новая
       15

Ошибка с открытием Multi-Series Line Chart от Майка Боштока

0 голосов
/ 26 мая 2018

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

Я бы хотел посмотреть, как выглядит его серия "Города".

Я открыл html-файл, используя локальный сервер Python, и в консоли написал «console.log (towns);»но это не сработало.'Console.log (данные);'тоже не сработало.Все они показали это сообщение об ошибке: 

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

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

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

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

1 Ответ

0 голосов
/ 27 мая 2018

Вероятно, причина 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 .

CAVEAT : этот блок предназначен для d3v4, последняя версия d3 - v5.В v5 d3-запрос считается устаревшим в пользу d3-fetch .d3-fetch предоставляет почти тот же набор утилит для извлечения данных, но вместо использования функций обратного вызова они возвращают Promises .

...