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

Question

我在试着学习。我看到了这织女星的例子：

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

它的产出如下：

​

​

我试着把它翻译成vega代码：

​

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语法翻译成vega代码.这里是指向可观察的笔记本的链接。

更新

正如注释中所指出的，相同的图表所显示的数据是相同的。所以输出是绝对正确的。我一开始就没有聚合(正如您可以在可观察的笔记本中看到的那样)，它也有类似的细条形图。现在，在添加聚合之后，我期望得到精确的可视化(至少是条形图宽度)。它们在数据/高度方面是精确的，但与非聚集的宽度相同的宽度使我误以为它没有变化。

现在我有以下疑问：

Q1.为什么这些条子更薄而不像doc的可视化那样宽？

Q2.为什么尺度之间有差异？vega是否定义了与vega不同的默认规模配置？

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();
}

​

​