交叉口颜色未正确显示

Question

寻求帮助对 Vega Lite 面积图进行故障排除。我需要正确着色“活动”和“停止”线之间的交叉区域。

我确实使用 transfrom 创建了要计算的区域的两个部分，并使用一些逻辑来选择哪条线向上或向下。但是，在面积图中，面积的插值并未反映所需的着色区域。

现状

下面是迄今为止的 vega lite 代码

{
  "data": 
  {
    "values": [{"Date":"2024-04-01","Activity":3,"Stops":10},{"Date":"2024-04-02","Activity":6,"Stops":13},{"Date":"2024-04-03","Activity":13,"Stops":11},{"Date":"2024-04-04","Activity":13,"Stops":14},{"Date":"2024-04-05","Activity":12,"Stops":16},{"Date":"2024-04-06","Activity":6,"Stops":11},{"Date":"2024-04-07","Activity":9,"Stops":8},{"Date":"2024-04-08","Activity":10,"Stops":9},{"Date":"2024-04-09","Activity":11,"Stops":5},{"Date":"2024-04-10","Activity":20,"Stops":10},{"Date":"2024-04-11","Activity":9,"Stops":6},{"Date":"2024-04-12","Activity":15,"Stops":8},{"Date":"2024-04-13","Activity":17,"Stops":4},{"Date":"2024-04-14","Activity":7,"Stops":5},{"Date":"2024-04-15","Activity":5,"Stops":8},{"Date":"2024-04-16","Activity":14,"Stops":4},{"Date":"2024-04-17","Activity":18,"Stops":3},{"Date":"2024-04-18","Activity":13,"Stops":13},{"Date":"2024-04-19","Activity":13,"Stops":5},{"Date":"2024-04-20","Activity":14,"Stops":3},{"Date":"2024-04-21","Activity":10,"Stops":8},{"Date":"2024-04-22","Activity":15,"Stops":12},{"Date":"2024-04-23","Activity":15,"Stops":6},{"Date":"2024-04-24","Activity":19,"Stops":9},{"Date":"2024-04-25","Activity":6,"Stops":9},{"Date":"2024-04-26","Activity":16,"Stops":6},{"Date":"2024-04-27","Activity":11,"Stops":3},{"Date":"2024-04-28","Activity":9,"Stops":10},{"Date":"2024-04-29","Activity":14,"Stops":6},{"Date":"2024-04-30","Activity":19,"Stops":9}]
    },
    "width":500,
    "height":200,
  "layer": [
    
          {
            "mark": {
              "type": "line",
              "point":{
                "filled":true,
                "fill":"#20419A"
              },
              "color":"#20419A",
              "opacity": 1,
              "tooltip": true
            },
            "encoding": {
              "y": {
                "field": "Activity"
              }
            }
          },
          {
            "mark": {
              "type": "line",
              "point":{
                "filled":true,
                "fill":"#00A19C"
              },
              "color":"#00A19C",
              "opacity": 1,
              "tooltip": true
            },
            "encoding": {
              "y": {
                "field": "Stops"
              }
            }
          },
          {
            "transform":[
              {
                "calculate":"datum['Stops']<=datum['Activity']?datum['Stops']:datum['Activity']", "as":"MinY"
              }
            ],
            "mark": {
              "type": "area",
              "line":true,
              "point":true,
                "color":"red",      "opacity": 1,
                "tooltip":true
            },
            "encoding": {
            
              "y": {
                "field": "Activity"
              },
              "y2": {
                "field": "MinY"
              }
            }
          },
          {
            "transform":[
              {
                "calculate":"datum['Activity']<=datum['Stops']?datum['Activity']:datum['Stops']", "as":"MinY1"
              }
            ],
            "mark": {
              "type": "area",
              "line":true,
              "point":true,
              "interpolate":"linear",
                "color":"#00A19C",      "opacity": 1,
                "tooltip":true
            },
            "encoding": {
            
              "y": {
                "field": "Stops"
              },
              "y2": {
                "field": "MinY1"
              }
            }
          }
  ],
   "encoding": {
          "x": {
            "field": "Date",
            "type": "temporal",
            "axis": {
              "labelFontSize": 8,
              "labelFont": "sans-serif",
              "labelFontWeight": "bold",
              "labelAngle": 0,
              "title":"Date",
              "format":"%_d %b"
            }
          },
          "y": {
            "type": "quantitative",
             "axis": {
              "labelFontSize": 12,
              "labelFont": "sans-serif",
              "labelFontWeight": "bold",
              "title": null,
              "domain":false,
              "grid":false,
              "ticks":false,
              "labels":false
            }
          }
        },
    "title": {
    "text": [
      "XXXXX"
    ],
    "subtitle": "Operations",
    "font": "sans-serif",
    "align": "left",
    "anchor": "start",
    "dx": 0,
    "fontSize": 18,
    "subtitleFontSize": 12
  }
}
[text]

这是 vega lite 中的代码，通过变换计算来创建红色和绿色区域链接到编辑器 请注意，彩色区域与预期的“交叉点”不匹配，如下面积图所示（未使用转换计算）。 编辑器链接

“蓝”线和“绿”线之间的区域将为“红”。 “绿”线和“蓝”线之间的区域将为绿色 期望的结果

Answer 1

我建议您阅读Daniel Marsh-Patrick's非常有见地的分析：

使用 Deneb 对 Power BI 中的丘陵和山谷进行研究：

https://coacervo.co/deneb_hill_valley

您需要以更好的方式计算线条相交的位置。 不久前我已经提供了类似的答案，如何使用 Javascript 做到这一点。

折线图的 Vega-Lite 渐变