如何使用SVG标记（其大小仅在一个方面增加）制作图表，或在Vega/Vega Lite中为每个数据点显示自定义SVG标记？

我想制作一张以“尖峰”为标记的图表。为了表示数据的“严重性”或“定量”性质，我想将“峰值”扩展得更长，而不是更宽。目前，当我使用

大小

编码时，它会增加“尖峰”的区域，这是不可取的。我也使用了

“aspect”：false

，但结果没有改变-

织女星Lite规格

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": {"type": "point", "shape":"M -1 0 L0 -10 L1 0", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "size": {"field": "b", "type": "quantitative"}
  }
}

然后我想，也许我可以指定

shape

作为编码，并提供仅在高度上变化的自定义SVG，作为数据本身的路径值，并在shape编码中传递。但这当然不起作用。Vega Lite指定了自己的形状-

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "c":"M -1 0 L0 -10 L1 0"}, {"a": "B", "b": 55, "c":"M -1 0 L0 -5 L1 0"}, {"a": "C", "b": 43, "c":"M -1 0 L0 -20 L1 0"},
      {"a": "D", "b": 91, "c":"M -1 0 L0 -1 L1 0"}
    ]
  },
  "mark": {"type": "point", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "shape": {"field": "c", "type": "quantitative"}
  }
}

我还在

point

mark和

image

mark中使用

url

编码，但它们没有产生任何效果

我在Vega中看到，这可能很有用，但在Vega Lite中没有看到。如果它能以某种方式被使用，那也没关系

你知道我该怎么做吗

其主要思想是使标记的宽度相同，但缩放高度。我不介意通过对通道或参数进行编码，或者为每个数据点指定SVG路径，无论哪种方式都可以

编辑1 在摆弄了织女星之后，我开始做以下事情-

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A simple bar chart with embedded data.",
  "background": "white",
  "padding": 5,
  "height": 700,
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "values": [
        {"a": "A", "b": 1.5, "c": 0},
        {"a": "B", "b": 0.5, "c": 0},
        {"a": "C", "b": 10, "c": 0},
        {"a": "D", "b": 1, "c": 0}
      ]
    },
    {
      "name": "data_0",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
        }
      ]
    }
  ],
  "signals": [
    {"name": "x_step", "value": 20},
    {
      "name": "width",
      "update": "bandspace(domain('x').length, 1, 0.5) * x_step"
    }
  ],
  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "style": ["path"],
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "opacity": {"value": 0.7},
          "fill": {"value": "red"},
          "stroke": {"value": "red"},
          "strokeOpacity": {"value": 1},
          "strokeWidth": {"value": 0.25},
          "shape": {"value": "M -1 0 L0 -10 L1 0 Z"},
          "ariaRoleDescription": {"value": "point"},
          "description": {
            "signal": "\"a\" + \": \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; \" + \"b\" + \": \" + (format(datum[\"b\"], \"\"))"
          },
          "x": {"scale": "x", "field": "a"},
          "y": {"scale": "y", "field": "c"},
          "scaleY": {"field": "b", "type": "quantitative"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "point",
      "domain": {"data": "data_0", "field": "a", "sort": true},
      "range": {"step": {"signal": "x_step"}},
      "padding": 0.5
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "data_0", "field": "b"},
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "size",
      "type": "linear",
      "domain": {"data": "data_0", "field": "b"},
      "range": [0, 361],
      "zero": true
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "a",
      "labelAlign": "right",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "labelOverlap": true,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "b",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ]
}

这给了我-

我试图将其转换为Vega Lite，但似乎不起作用-

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 2}, {"a": "B", "b": 5}, {"a": "C", "b": 4},
      {"a": "D", "b": 9}
    ]
  },
  "mark": {"type": "point", "shape":"M -1 0 L0 -10 L1 0", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
  "encoding": {
    "x": {"field": "a", "type": "ordinal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"},
    "scaleY": {"field": "b", "type": "quantitative"}
  }
}

错误

Property scaleY is not allowed.

---

第二种方法是在

形状

编码中提供SVG路径，如果将

比例

设置为

null

（），则该方法将起作用：

---

Vega Lite不提供与Vega的

ScaleY

编码等效的编码，因此如果您想要这种方法，您必须直接在Vega中工作。

目前我可以接受，无需担心。但是我想知道您是如何发现将

刻度设置为
null
可以解决这个问题的。我想我查过文件了，找不到任何与此相关的东西。是否在任何地方提到过？此处简要介绍了禁用电子秤：
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "c":"M -1 0 L0 -10 L1 0"},
      {"a": "B", "b": 55, "c":"M -1 0 L0 -5 L1 0"},
      {"a": "C", "b": 43, "c":"M -1 0 L0 -20 L1 0"},
      {"a": "D", "b": 91, "c":"M -1 0 L0 -1 L1 0"}
    ]
  },
  "mark": {"type": "point", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "shape": {"field": "c", "type": "quantitative", "scale": null}
  }
}