如何在vega中使用`rule`标记

Question

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

documentation for rule is a bit sparse. I'm basing my example below on this 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 editor

中得到了一个空图

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

如何在vega中使用`rule`标记

How to use the `rule` mark in vega

javascript

visualization

data-visualization

vega