javascript - 如何在 vega 中使用“规则”标记

Question

我在使用rulevega 中的标记创建跨越绘图的整个宽度或高度的线条时遇到问题。

的文档rule有点稀疏。我将下面的示例基于此 google groups post。

{
  "width": 250,
  "height": 250,
  "padding": "auto",
  "scales": [
    {"name": "xscale", "type": "linear", "range": "width", "domain": [0, 10]},
    {"name": "yscale", "type": "linear", "range": "height", "domain": [0, 10]}
  ],
  "axes": [
    {"type": "x", "scale": "xscale"},
    {"type": "y", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rule",
      "properties": {
        "enter": {
          "x": {"scale": "xscale", "value": 0},
          "x2": {"scale": "xscale", "group": "width"},
          "y": {"scale": "yscale", "value": 5.5},
          "stroke": {"value": "green"}
        }
      }
    }
  ]
}

看起来很直截了当，但我在vega 编辑器中得到了一个空的情节

Answer 1

问题是宽度的规范x2。

在这种情况下，它应该是：

"x2": {"scale": "xscale", "value": 10},

或者

"x2": {"signal": "width"},

制定完整的规范：

{
  "width": 250,
  "height": 250,
  "padding": "auto",
  "scales": [
    {"name": "xscale", "type": "linear", "range": "width", "domain": [0, 10]},
    {"name": "yscale", "type": "linear", "range": "height", "domain": [0, 10]}
  ],
  "axes": [
    {"type": "x", "scale": "xscale"},
    {"type": "y", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rule",
      "properties": {
        "enter": {
          "x": {"scale": "xscale", "value": 0},
          "x2": {"signal": "width"},
          "y": {"scale": "yscale", "value": 5.5},
          "stroke": {"value": "green"}
        }
      }
    }
  ]
}