如何使刻度填充 Vega-lite 中的带宽答案

【问题标题】：How to make ticks fill the band width in Vega-lite如何使刻度填充 Vega-lite 中的带宽
【发布时间】：2022-01-05 18:19:23
【问题描述】：

我正在尝试使用刻度线来分隔堆叠条，但我不知道如何使刻度线与响应式条形标记 (example) 齐宽。

我这样做的原因是我希望刻度看起来像堆叠条之间的分隔符。我尝试过的另一种方法是在条形标记上设置笔划（example），但这会在条形的左侧和右侧添加一个我不想要的边框。我只希望分隔符垂直位于两个条之间。

【问题讨论】：

全宽是指要匹配bar标记的宽度吗？
是的。与栏的宽度相匹配。

标签： vega-lite

【解决方案1】：

您可以简单地将width 配置添加到您的mark 对象中。

参考以下配置或editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
  "width": "container",
  "data": {"url": "data/cars.json"},
  "layer": [
    {
      "mark": {"type": "bar", "width": 50},
      "encoding": {
        "y": {"field": "Horsepower", "type": "quantitative"},
        "x": {"field": "Cylinders", "type": "ordinal"}
      }
    },
    {
      "mark": {"type": "tick", "color": "tomato", "width": 50},
      "encoding": {
        "y": {"field": "Horsepower", "type": "quantitative", "stack": true},
        "x": {"field": "Cylinders", "type": "ordinal"}
      }
    }
  ]
}

【讨论】：

图表是响应式的，我想保持这种方式而不是设置绝对值。有没有办法将刻度宽度设置为波段的宽度而不是静态值？
每当我尝试缩小图表时，刻度不尊重容器响应行为。条形图的宽度减小了，但刻度宽度没有减小（没有width 配置）。你能告诉我你为什么使用ticks 标记吗？因为它看起来像条形图，所以您可以将橙色标记用作条形图？
我已经用更多细节更新了原始问题。