打开 Mike Bosktok 的多系列折线图时出错

Question

我正在用 Mike Bostok 的例子练习 d3：https://bl.ocks.org/mbostock/3884955

我想看看他做的系列——城市——长什么样子。

我使用 Python 本地服务器打开了 html 文件，在控制台中，我写了 'console.log(cities);' 但它不起作用。 'console.log(data);' 也没有用。他们都显示了这个错误信息：

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

我没有对他的代码做任何修改。所以我认为代码中没有错误。我假设问题可能与 d3 设置一致？所以，我尝试在 Firefox 中打开该文件，我也下载了 d3，但这两种方法也没有用。

有没有人碰巧知道问题的原因是什么？如果有人能解释一下他的代码中的 'cities' 是什么样子的，那将是非常欢迎的！

非常感谢，

Answer 1

猜测 cities 是 undefined 的原因是因为您的 console.log 语句在提供给 d3.tsv 的回调函数之外的某个地方。如果仔细查看 Mike 的代码，您会注意到 d3.tsv 的第三个参数是一个函数，它接收一个错误 object 和处理后的数据作为参数。在该函数内部，他定义了 cities 变量，因此如果您将 console.log(cities) 放在该函数之外的任何位置，cities 将是 undefined.

现在，关于数据的格式。如果你再往下看那个块，还有另一个文件：data.tsv。它有四列：日期、纽约、旧金山、奥斯汀。 d3.tsv 将创建一个数组，其中数组中的每个元素对应于 TSV 中的一行（header 行除外）。每行都转换为普通的 JavaScript Object，其属性与文件的列相对应。该数组作为此块中的 data 变量传递到回调中。所以 data[0] 将是

{
  "date": "20111001",
  "New York": "63.4",
  "San Francisco": "62.7",
  "Austin": "72.2"
}

当定义cities变量时，该数组被转换为一个包含每个城市一项的数组，每个代表城市的object包含温度的time-series数据为了那个城市。所以 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 object 的地方。如果没有这个参数，data 中的所有属性值都将是字符串。

有关 d3.tsv 工作原理的更多信息，您可以查看 d3-request 的文档。

注意事项：该块是针对 d3v4 的，d3 的最新版本是 v5。在 v5 中，d3-request 已弃用，取而代之的是 d3-fetch. d3-fetch provides pretty much the same set of utilities for fetching data, but instead of using callback functions, they return Promises.

打开 Mike Bosktok 的多系列折线图时出错

An error with opening Multi-Series Line Chart from Mike Bosktok

referenceerror

d3.js