Как сделать галочку той же ширины, что и полоса

Question

У меня есть это spe c: Прямая ссылка на spe c

Я бы хотел сделать тик таким же большим, как и бар, в общем случае c (Если размер представления изменится, я бы хотел, чтобы ширина галочки тоже менялась). Это способ сделать это? Делая какое-то преобразование или обращаясь к какой-то скрытой переменной (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"
        }
      }
    }
  ]
}