vega-lite - 如何使刻度线与条形图的宽度相同

Question

我有这个规范：直接链接到规范

我想以通用的方式使刻度与条一样大（如果视图的大小发生变化，我希望刻度的宽度也发生变化）。这是一种方法吗？通过进行一些转换或访问一些隐藏变量（stepWidth ？）？我不想通过设置步长来设置视图大小，因为我希望我的图表适合已定义的 DOM 元素。

标签： vega-lite

Answer 1

我不知道以这种方式配置刻度线的任何方法。但实现您想要的一种方法是覆盖一个零高度条，其笔触（即轮廓）配置为您想要的样子。例如（维加编辑器）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "datasets": {
    "$ly1": [
      {
        "Continent": "Asia",
        "Population": 4467162
      },
      {
        "Continent": "Europe",
        "Population": 622209
      },
      {
        "Continent": "Africa",
        "Population": 1157519
      },
      {
        "Continent": "Oceania",
        "Population": 36944
      },
      {
        "Continent": "North America",
        "Population": 564626
      },
      {
        "Continent": "Antarctica",
        "Population": 6
      },
      {
        "Continent": "South America",
        "Population": 410308
      }
    ]
  },
  "data": {
    "name": "$ly1"
  },
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "width": {"step": 60},
  "encoding": {
    "x": {
      "field": "Continent",
      "type": "nominal"
    },
    "y": {
      "field": "Population",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "#ccc"
      }
    },
    {
      "mark": {
        "type": "bar", "strokeWidth": 3
      },
      "encoding": {
        "y2": {"field": "Continent"},
        "stroke" : {
          "field": "Continent", 
          "type": "nominal"
        },
        "color" : {
          "field": "Continent", 
          "type": "nominal"
        }
      }
    }
  ]
}