交替条纹与织女星

Question

我们如何使用 vega 添加交替的网格线或条纹？

假设我们从这个例子开始：

https://vega.github.io/vega/examples/grouped-bar-chart/

在编辑器中：

https://vega.github.io/editor/#/examples/vega/grouped-bar-chart

这是它的样子：

我们如何更改图形，使 A 和 C 在背景中有交替的水平条纹，但 B 没有？

换句话说，如果我们想为“A”和“C”显示灰色背景条纹，而为“B”显示白色条纹怎么办。

像这样：

Answer 1

您可以添加一个标记组:

{
  "type": "group",
  "data": [
    {
      "name": "data_category",
      "source": "table",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["category"],
          "fields": ["category"],
          "ops": ["count"]
        },
        {"type": "identifier", "as": "category_id"}
      ]
    }
  ],
  "marks": [
    {
      "name": "category_background",
      "type": "rect",
      "from": {"data": "data_category"},
      "encode": {
        "enter": {
          "y": {"scale": "yscale", "field": "category"},
          "height": {"scale": "yscale", "band": 1},
          "width": {"signal": "width"},
          "fill": {
            "signal": "datum['category_id'] % 2 == 0 ? '#eee' : '#ccc'"
          },
          "fillOpacity": {"value": 0.6}
        }
      }
    }
  ]
},

参考资料

组标记： https://vega.github.io/vega/docs/marks/group/

标识符转换： https://vega.github.io/vega/docs/transforms/identifier/

Open in Vega Editor

交替条纹与织女星

Alternating stripes with vega

javascript

data-visualization

vega