3

我正在尝试使用Observable中的 D3 重现分组条形图。我正在使用 D3.v5 在 Chrome 上运行脚本。

在脚本中我有：

var data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv",
    d3.autoType), {
    y: "Population"
});

当我在 HTML 中运行它时，它显示以下错误：

Uncaught SyntaxError: missing ) 在参数列表之后

我在 Chrome 控制台上试了一下，效果很好。

HTML 文件内容：

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>


var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 

var data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv", d3.autoType), {y: "Population"});
 

</script>

成功后，数据应该是如下对象：

[{…}, {…}, {…}, {…}, {…}, {…}, columns: Array(8), y: "Population"]
4

2 回答 2

4

你想要的是将代码从Observable笔记本移动到一个通用的 JavaScript 脚本。在这种情况下，您不能await像以前那样使用。

如果您查看MDN 页面，您会非常清楚地看到：

await 运算符用于等待 Promise。它只能在异步函数内部使用。（强调我的）

话虽如此，这个async带有您的代码的函数将起作用：

(async function foo() {
  const data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv", d3.autoType), {
    y: "Population"
  });
  console.log(data)
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

由于 notebook 的工作方式，该代码在 Observable notebook 中运行：

Observable 在某种意义上已经支持异步生成器：您还可以定义一个（同步）生成器单元来生成 Promise。Observable 等待前一个 promise 解决，然后从生成器中提取下一个 promise。（来源）

最后，关于您观察到代码在 Chrome 的控制台上运行的观察：不仅仅是 Chrome，该代码将在没有async大多数现代浏览器的控制台的情况下运行。解释是控制台中的代码是async默认包装的。这是一个很好的阅读：https ://medium.com/@tomsu/devtools-tips-day-7-the-simple-joys-of-async-console-578f4ce67df4

于 2019-07-03T03:17:52.767 回答
0

请用

<script type="text/javascript">

代替

<script>
于 2020-11-05T08:09:58.603 回答