D3.js 从Mike Bosktok打开多系列折线图时出错

我正在用Mike Bostok的例子练习d3：

我想看看他制作的系列电影《城市》的样子

我使用Python本地服务器打开了html文件，并在控制台中编写了“console.logcities；”但它不起作用console.logdata；'也没用。他们都显示了这个错误信息：

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

我没有修改他的密码。所以我认为代码中没有错误。我想问题可能与d3设置一致？ 所以，我试着在Firefox中打开这个文件，我也下载了d3，但这两种方法都不起作用

有人知道问题的原因吗？ 如果有人能解释他的代码中的“城市”是什么样子的，那么你是最受欢迎的

非常感谢，

猜测一下，cities未定义的原因是您的console.log语句位于提供给d3.tsv的回调函数之外。如果仔细查看Mike的代码，您会注意到d3.tsv的第三个参数是一个函数，它接收一个错误对象和处理过的数据作为参数。在该函数中，他定义了cities变量，因此如果将console.logcities放在该函数之外的任何位置，cities都将是未定义的

现在，我们来看看数据的格式。如果再往下看，就会发现另一个文件：data.tsv。它有四列：日期，纽约，旧金山，奥斯丁。d3.tsv将创建一个数组，其中数组中的每个元素对应于tsv中除标题行之外的一行。每一行都转换为一个普通JavaScript对象，其属性与文件的列相对应。该数组作为此块中的数据变量传递到回调中。因此，数据[0]将被删除

定义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函数。这是将所有字符串转换为日期或数字对象的地方。如果没有此参数，数据中的所有属性值都将是字符串

有关d3.tsv如何工作的更多信息，您可以查看文档中的

---

警告：该块用于d3v4，d3的最新版本是v5。在v5中，d3请求被弃用，取而代之的是。d3 fetch为获取数据提供了几乎相同的实用程序集，但它们不使用回调函数，而是返回。

Hi@darth\u mall，感谢您的回复。我想知道您展示的数据结构是否不是通过d3.tsv解析“数据”的方式？我很困惑变量“城市”的定义是否不同？特别是，要确定三个城市/颜色？苏，对，对不起，我的回答粗心大意。我显示的数据格式是传递到d3.tsv回调中的数据参数的结构。在Mike Bostock为城市赋值的那一行，他正在重新格式化数据。我会用这些细节更新我的答案。

[
  {
    "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": [...]
  }
]