Vega 图表用值绘制刻度线

Question

我正在尝试在 Vega 中绘制多弧图。 是否可以在每个弧的顶部绘制带有值的线？就像所附的图片 每条线都应穿过所有弧并在外部弧的顶部结束（如图所示）。 我还需要在每行顶部显示代表值的数字

这是我的图表配置

Answer 1

这个合适吗？

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 600,
  "signals": [
    {"name": "centerX", "update": "width / 2"},
    {"name": "centerY", "update": "height / 2"},
    {"name": "radiusRef", "update": "min(width / 2, height / 2)"},
    {"name": "padding", "value": 18},
    {"name": "numArcs", "value": 2},
    {"name": "arcStep", "update": "0.4 / numArcs"},
    {"name": "ticksNumber", "value": 6},
    {"name": "ticksColor", "value": "#000000"},
    {"name": "showTicks", "value": true},
    {"name": "arc1", "value": {"value": 70, "fillColor": "#77A7FB"}},
    {"name": "arc2", "value": {"value": 40, "fillColor": "#FFB677"}},
    {"name": "innerRadius1", "update": "radiusRef * (1 - arcStep)"},
    {"name": "outerRadius1", "update": "radiusRef * 1 - padding"},
    {"name": "mainValue3", "value": 80},
    {"name": "minValue", "value": 0},
    {"name": "maxValue", "value": 100},
    {"name": "fontFactor", "update": "(radiusRef / 5) / 25"},
    {"name": "backgroundColor", "value": "#cbd1d6"},
    {"name": "fillColor3", "value": "#77FF77"}
  ],
  "data": [
    {
      "name": "ticks",
      "transform": [
        {
          "type": "sequence",
          "as": "data",
          "start": {"signal": "0"},
          "stop": {"signal": "(maxValue - minValue) + 0.1"},
          "step": {"signal": "(maxValue - minValue) / (ticksNumber - 1)"}
        },
        {"type": "formula", "expr": "datum.data + minValue", "as": "data_2"},
        {
          "type": "formula",
          "as": "radianRef",
          "expr": "PI * (datum.data / (maxValue - minValue))"
        },
        {
          "type": "formula",
          "as": "x",
          "expr": "centerX - ((outerRadius1 - (outerRadius1 - innerRadius1) * 0.6) * cos(datum.radianRef))"
        },
        {
          "type": "formula",
          "as": "y",
          "expr": "centerY - ((outerRadius1 - (outerRadius1 - innerRadius1) * 0.7) * sin(datum.radianRef))"
        }
      ]
    },
    {
      "name": "mainValues",
      "values": [
        {"name": "Policy 1", "value": 27},
        {"name": "Policy 2", "value": 43}
      ],
      "transform": [{"type": "window", "ops": ["row_number"], "as": ["index"]}]
    }
  ],
  "scales": [
    {
      "name": "gaugeScale",
      "type": "linear",
      "domain": {"data": "ticks", "field": "data_2"},
      "zero": false,
      "range": {"signal": "[-PI / 2, PI / 2]"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "mainValues", "field": "name"},
      "range": {"scheme": "category10"}
    }
  ],
  "marks": [
    {
      "type": "arc",
      "name": "gauge3",
      "from": {"data": "mainValues"},
      "encode": {
        "enter": {
          "x": {"signal": "centerX"},
          "y": {"signal": "centerY"},
          "startAngle": {"signal": "-PI / 2"},
          "endAngle": {"signal": "PI / 2"},
          "outerRadius": {
            "signal": "radiusRef * (1 - datum.index * arcStep) - padding"
          },
          "innerRadius": {
            "signal": "radiusRef * (1 - datum.index * arcStep) + padding"
          },
          "fill": {"signal": "backgroundColor"}
        }
      }
    },
    {
      "type": "arc",
      "from": {"data": "mainValues"},
      "encode": {
        "enter": {"startAngle": {"signal": "-PI / 2"}},
        "update": {
          "x": {"signal": "centerX"},
          "y": {"signal": "centerY"},
          "innerRadius": {
            "signal": "radiusRef * (1 - datum.index * arcStep) + padding"
          },
          "outerRadius": {
            "signal": "radiusRef * (1 - datum.index * arcStep) - padding"
          },
          "endAngle": {"scale": "gaugeScale", "field": "value"},
          "fill": {"scale": "color", "field": "name"}
        }
      }
    },
        {
      "type": "arc",
      "from": {"data": "mainValues"},
      "encode": {
        "enter": {"startAngle": {"signal": "-PI / 2"}},
        "update": {
          "x": {"signal": "centerX"},
          "y": {"signal": "centerY"},
          "innerRadius": {
            "signal": "radiusRef * (1 - datum.index * arcStep) + padding"
          },
          "outerRadius": {
            "signal": "radiusRef * (1 - 1 * arcStep) - padding+50"
          },
          "startAngle": {"scale": "gaugeScale", "signal": "datum.value-1"},
          "endAngle": {"scale": "gaugeScale", "field": "value"},
          "fill": {"scale": "color", "field": "name"}
        }
      }
    }
  ]
}