如何将平均聚合 vega-lite 语法转换为 vega-lite-api 代码

Question

我试图学习 vega-lite-api。 我遇到了 这个vega-lite 示例：

{
  "data": {"url": "data/cars.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "Cylinders"},
    "y": {"aggregate": "mean", "field": "Acceleration"}
  }
}

它输出：

我试图将其翻译成 vega-lite-api 代码：

 var data = JSON.parse($.getJSON({'url': "https://unpkg.com/vega-datasets@1.25.0/data/cars.json", 'async': false}).responseText); createChart = function (data) { const plot = vl.markBar() .data(data) .encode( vl.x() .fieldQ('Cylinders'), vl.y({"aggregate": "mean", "field": "Acceleration", "type": "quantitative"}) // .fieldQ('Acceleration') ) return plot.toObject(); } const chart_spec_json = this.createChart(data) const opt = { renderer: "canvas", actions: false }; vegaEmbed("#stats", chart_spec_json, opt);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <script src="https://unpkg.com/vega@5.21.0/build/vega.min.js"></script> <script src="https://unpkg.com/vega-lite@5.2.0/build/vega-lite.min.js"></script> <script src="https://www.unpkg.com/vega-embed@6.20.8/build/vega-embed.min.js"></script> <script src="https://unpkg.com/vega-lite-api@5.0.0/build/vega-lite-api.min.js"></script> <div id="stats" />

运行上面的代码。 它将输出以下内容：

现在，我无法弄清楚如何将这个 vega-lite 语法翻译成 vega-lite-api 代码。 这是可观察笔记本的链接。

更新

正如评论中所指出的，相同图表显示的数据是相同的。 所以输出肯定是正确的。 我开始时没有聚合（正如您在可观察笔记本中看到的那样），它也有类似的细条形图。 现在添加聚合后，我期待精确的可视化（至少条形宽度）。 它们在数据/高度方面是准确的，但是与非聚合宽度相同的宽度让我误以为它没有改变。

现在我有以下疑问：

Q1。 为什么条形图更细而不是像文档可视化那样更宽？

Q2。 为什么秤之间有差异？ vega-lite-api 是否定义了与 vega-lite 不同的默认比例配置？

Q3。 我还在vl()中指定了语法。 如何使用aggregate()使用“相应”api 来做到这一点？

Answer 1

尝试这个。

mean_acceleration = {
  const plot = vl.markBar()
                .data(cars_data)
                .encode(
                  vl.x()
                    .field('Cylinders'),
                  vl.y()
                    .field('Acceleration')
                    .aggregate('mean')
                )
  return plot.render();
}