如何使 Tick 与 Bar 的宽度相同

Question

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

Answer 1

我不知道有什么方法可以用这种方式配置刻度线。但是实现您想要的效果的一种方法是覆盖一个零高度条，其笔划（即轮廓）配置为看起来您想要的样子。例如 (vega editor):

{
  "$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"
        }
      }
    }
  ]
}

如何使 Tick 与 Bar 的宽度相同

How to make a Tick the same width as a Bar

vega-lite