Vega-lite - 刷域时在标签区域显示标记

Question

我有一个按概览缩放的图表

我在 x 轴和 x 轴标签之间添加了点标记。

这些点也应该通过概览进行缩放。 然而，当我将

"scale": {"domain": {"param": "brush"}},

添加到 x 编码的点标记时，这些点消失了。

如果我将点放置在 x 轴上方，它们可以变得可见，但是我需要它们位于 x 轴下方，如上所示。

这是不可见点的代码： （您可能需要删除 \ 注释，具体取决于您的 vega-lite 编辑器）

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 200,
      "layer": [
        {
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": "", "labelPadding": 20}
            },
            "y": {"field": "price", "type": "quantitative"}
          }
        },
        {
          "mark": "point",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}}, \\ <- removing this makes the points visible but removes the ability to zoom
              "axis": {"title": ""}
            },
            "y": {"value": 210}, \\ <- setting this below 200 makes the points visible, but I need it to be above 200 and keep the dots visible
            "color": {"value": "black"}
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

Answer 1

这是剪辑设置：

更换

"mark": "point",

与

"mark": {"type": "point", "clip": false}

Answer 2

将剪辑设置为 false。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 200,
      "layer": [
        {
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": "", "labelPadding": 20}
            },
            "y": {"field": "price", "type": "quantitative"}
          }
        },
        {
          "mark": {"type": "point", "clip":false} ,
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}}, 
              "axis": {"title": ""}
            },
            "y": {"value": 210}, 
            "color": {"value": "black"}
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}