1

我试图弄清楚 D3 画廊中 Mike Bostock 的箱线图示例中发生了什么。这是 Observable 笔记本中的代码：https ://observablehq.com/@d3/box-plot

其中有一个看起来不是函数定义但有返回值的代码块：

chart = {
    const svg = d3.select(DOM.svg(width, height));

    const g = svg.append("g")
        .selectAll("g")
        .data(bins)
        .join("g");

    // [...]

    return svg.node();
}

return当它不在函数定义中时是什么意思？

4

1 回答 1

4

是的，正如评论者所建议的，这是 Observable 特有的语法。如代码简介中所述，您所看到的单元格使用了块。

相对于其他 JavaScript，您可以如何看待它，它有点像IIFE，但还要考虑到，如果它引用其他单元格，它会自动解析它们。所以在普通的 JavaScript 中，这会是这样的：

chart = (() => {
    const svg = d3.select(DOM.svg(width, height));

    const g = svg.append("g")
        .selectAll("g")
        .data(bins)
        .join("g");

    // [...]

    return svg.node();
})()

事实上，这大致就是他们编译的内容。特定的语法是这样的，因为它的目的是明确它是在引用更改时运行的代码 - 有关详细信息，请参阅Observable 如何运行。与 IIFE 不同，Observable 中的一个单元格可能会运行多次，如果它引用的东西（如生成器或 Promise）发生了变化。

于 2019-04-26T18:48:57.960 回答