d3.js 示例代码中的“图表”如何工作？

Question

美好的一天，我正在学习 d3.js。 我正在阅读这个烛台图表示例：https://observablehq.com/@d3/candlestick-chart 但它的代码让我很困惑，因为它的第一部分：

chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  svg.append("g")
      .call(xAxis);

  svg.append("g")
      .call(yAxis);

  const g = svg.append("g")
      .attr("stroke-linecap", "round")
      .attr("stroke", "black")
    .selectAll("g")
    .data(data)
    .join("g")
      .attr("transform", d => `translate(${x(d.date)},0)`);

  g.append("line")
      .attr("y1", d => y(d.low))
      .attr("y2", d => y(d.high));

  g.append("line")
      .attr("y1", d => y(d.open))
      .attr("y2", d => y(d.close))
      .attr("stroke-width", x.bandwidth())
      .attr("stroke", d => d.open > d.close ? d3.schemeSet1[0]
          : d.close > d.open ? d3.schemeSet1[2]
          : d3.schemeSet1[8]);

  g.append("title")
      .text(d => `${formatDate(d.date)}
Open: ${formatValue(d.open)}
Close: ${formatValue(d.close)} (${formatChange(d.open, d.close)})
Low: ${formatValue(d.low)}
High: ${formatValue(d.high)}`);

  return svg.node();
} 

为什么这个例子把代码放在图表里？ svg.node() 在这个例子中做了什么？谢谢！

Answer 1

这不是有效的 JavaScript，而是 Observable 的自定义语言（基于 JavaScript 构建）中的“单元格”示例：

https://observablehq.com/@observablehq/observables-not-javascript

您可以将其与普通的function 进行比较，但作为奖励，需要时会自动重新计算相互依赖的事物：

https://observablehq.com/@observablehq/how-observable-runs

所以在这种情况下，chart 是一个“函数”，它根据一些 data 和其他设置创建图表，然后返回 SVG 元素 (svg.node())。