Question

我和Mike Bostok一起练习d3的例子：https://bl.ocks.org/mbostock/3884955

我想看看他制作的系列 - 城市 - 是怎样的。

我使用Python本地服务器打开了html文件，在控制台中，我写了＃console.slog（cities）;＆＃39;但它没有用。＆＃39;的console.log（数据）;＆＃39;也没有工作。他们都显示了此错误消息：

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

我没有对他的代码进行任何修改。所以我不认为代码中存在错误。我想也许这个问题与d3设置一致？所以，我试图在Firefox中打开文件，我也下载了d3，但这两种方式也没有用。

有没有人碰巧知道问题的原因是什么？如果有人能解释这些城市的情况如何？在他的代码看起来像，那么你是最受欢迎的！

非常感谢，

Answer 1

猜测，cities为undefined的原因是因为您的console.log语句位于提供给d3.tsv的回调函数之外的某个位置。如果仔细查看Mike的代码，您会注意到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-request而使用d3-fetch。 d3-fetch为获取数据提供了几乎相同的实用程序集，但它们不是使用回调函数，而是返回Promises。

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

1 个答案: