带有故意间隙的固定高度折线图

Question

我有一个具有固定 y 值的线标记，我希望它基于二进制值（值为 0 和 1）进行分段。

这里是一个例子（基于this），线条标记为红色，布尔值

high_price

是根据价格是否超过400

我尝试根据

high_price

的值设置不透明度，它在 2006 年的左侧有效（尽管看起来不透明度并不完全为零），但随后它只是保持在不透明度 1，即使2006 年之后，

high_price

的值在 0 和 1 之间变化了几次。

我怎样才能得到它，当

high_price

为零时，线条不可见，当它为1时，线条完全可见？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "encoding": {
    "x": {"field": "date", "type": "temporal"}
  },
  "layer": [{
  "mark": "area",
  "encoding": {
    "y": {"field": "price", "type": "quantitative"}
  }
  },
  {
    "transform": [
      {
        "calculate": "datum.price > 400 ? 1 : 0",
        "as": "high_price"
      }
    ],
    "mark": {"type": "line", "size": 5},
    "encoding": {
      "y": {
        "value": 201
      },
      "opacity": {
        "legend": null,
        "field": "high_price",
        "type": "quantitative"
      },
      "color": {"value": "red"}
    }
  }]
}

Answer 1

有这样的事吗？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "mark": "area",
      "encoding": {"y": {"field": "price", "type": "quantitative"}}
    },
    {
      "transform": [
        {"calculate": "datum.price > 400 ? 1 : 0", "as": "high_price"}
      ],
      "mark": {"type": "rule", "strokeWidth": 4},
      "encoding": {
        "y": {"value": 201}, "y2":{"value":195},
        "opacity": {"field": "high_price", "type": "ordinal", "scale":{"rangeMin":0}, "legend":null},
        "color": {"value": "red"}
      }
    }
  ]
}