连接规则标记中的连续值

Question

这是此问题的后续问题，针对动态 x 轴范围进行了修改。 这个想法是在图表底部根据布尔值显示线段，在此示例中，当价格超过 400 时。

有没有办法让规则标记（或任何其他标记）以便它连接连续的值？ 我可以增加笔划宽度，但是当我动态过滤日期范围时它会中断。 或者使用一些公式来根据范围计算笔画宽度，但这似乎有点过分了。

这是示例（基于下面的代码）

我希望它看起来像这样，即无论 x 轴放大或缩小多少，标记都会连接起来：

{
  "$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'"},
    {"filter": {"timeUnit": "year", "field": "date", "lte": "2007"}},
    {"filter": {"timeUnit": "year", "field": "date", "gte": "2005"}},
    ],
  "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": "quantitative", "scale":{"rangeMin":0}, "legend":null},
        "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"},
  "params": [{"name": "a", "expr": "round(range('x')[1]/length(data('source_0')))"}],
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"filter": {"timeUnit": "year", "field": "date", "lte": "2007"}},
    {"filter": {"timeUnit": "year", "field": "date", "gte": "2005"}}
  ],
  "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"},
      "encoding": {
        "strokeWidth": {"value": {"expr": "a"}},
        "y": {"value": 201},
        "y2": {"value": 195},
        "opacity": {
          "field": "high_price",
          "type": "quantitative",
          "scale": {"rangeMin": 0},
          "legend": null
        },
        "color": {"value": "red"}
      }
    }
  ]
}