0

在此示例中：https ://observablehq.com/@d3/connected-scatterplot

第一个代码块是这样开始的：

chart = {
  replay;

//...create svg element and setup the chart...

  return svg.node();
}

两个问题（如果这些很简单，我很抱歉，但我是 javascript 新手，谷歌对我没有任何帮助）：

1) chart 看起来像一个函数，因为它有一个 return 语句，但没有 function 关键字。如果我在我的烧瓶应用程序中为自己尝试这样的事情，当我输入 return 语句时会出现错误，因为它被评估为对象定义？这是一些 node.js 的东西吗？

2）那一行“重播”是什么？正在做？我在代码的其他地方没有看到对它的任何引用

编辑：我在这里找到了答案：https ://observablehq.com/@observablehq/observables-not-javascript

简而言之，那个网站上的任何东西都不是非常javascript，这在学习D3.js时真的很混乱，几乎所有的例子都在那个网站上（上面的页面有点难找）。但我想这都是让人们订阅并在 observablehq 上开发而不是编写独立的网络应用程序的商业模式的一部分。

4

1 回答 1

2

我为 Observable 工作，是的，“<a href="http://%20https://observablehq.com/@observablehq/observables-not-javascript" rel="nofollow noreferrer">Observable's not JavaScript” 是最好的要阅读的东西。chart正在声明一个反应变量；它不使用关键字；如您所见，它可以定义为单个表达式，如x = d3.scaleLinear()，或返回值的花括号函数块。您可以通过点击右上角“⋯”菜单中的“下载代码”来下载编译成纯 JavaScript 的 notebook；这里我注释了折线图示例的来源。您可以在那里看到单元格是如何编译成一个普通的 JavaScript 函数的，该函数传递了它所依赖的其他单元格的值。在那个“连接散点图”示例中，如果您下载代码，chart单元格最终看起来像这样：

function(replay, d3, width, height, length, line, data, xAxis, yAxis, x, y, halo) {
  replay;
    
  //...create svg element and setup the chart...
      
  return svg.node();
}

反应性的工作方式是，每当它引用的一个单元格发生变化时，都会重新评估每个单元格。当您单击按钮时，该replay;行利用这一点重新绘制散点图，该按钮会触发其单击事件，从而触发反应性重新评估，即使它没有传递任何数据或分配给变量或任何东西。

（我想这是一门生意，但我们真的在努力让这些东西的编码变得更容易！如果您有问题，很高兴与您交谈。）

于 2020-07-17T19:26:57.463 回答