如何在Vega-Lite中分离两类核反应堆LCOE共享数据图表

要实现两个横向拼接的图表分别展示大型、小型反应堆的LCOE数据，核心是给每个子图表添加数据过滤规则，只保留对应类型的数据集。具体修改步骤如下：

修改要点 #

• 在hconcat的两个子图表对象中，分别添加transform配置，通过filter筛选对应反应堆类型的数据（需根据你CSV中实际的类型字段名调整，示例假设字段为Reactor_Type，值为"Large"和"Small"）。
• 可选：给每个子图表添加独立标题，明确区分展示内容。

修改后的完整配置 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": {
    "text": "Projected Cost of Nuclear Power",
    "subtitle": [
      "LCOE of Nuclear, $/MWh",
      "Source: NREL Annual Technology Baseline 2024"
    ],
    "color": "purple"
  },
  "data": {
    "url": "https://raw.githubusercontent.com/Malcamo/Malcamo.github.io/refs/heads/main/Nuclear_LCOE_Cleaned.csv"
  },
  "background": "#d2ffd2",
  "hconcat": [
    {
      "title": "大型反应堆LCOE",
      "view": {"fill": "white", "strokeOpacity": 0},
      "width": 300,
      // 新增：过滤大型反应堆数据
      "transform": [
        {"filter": "datum.Reactor_Type === 'Large'"}
      ],
      "encoding": {
        "x": {"field": "Year", "type": "temporal", "title": null},
        "y": {"field": "LCOE", "type": "quantitative", "title": null},
        "color": {
          "scale": {"range": ["darkgreen", "teal", "darkblue"]},
          "condition": {
            "param": "hover",
            "field": "Scenario",
            "type": "nominal",
            "legend": null
          },
          "value": "grey"
        },
        "opacity": {"condition": {"param": "hover", "value": 1}, "value": 0.2}
      },
      "layer": [
        {
          "params": [
            {
              "name": "hover",
              "value": [{"Scenario": "Advanced"}],
              "select": {
                "type": "point",
                "fields": ["Scenario"],
                "on": "pointerover"
              }
            }
          ],
          "mark": {
            "type": "line",
            "strokeWidth": 8,
            "stroke": "transparent",
            "point": true
          }
        },
        {"mark": "line"},
        {
          "encoding": {
            "x": {"aggregate": "max", "field": "Year"},
            "y": {"aggregate": {"argmax": "LCOE"}, "field": "price"}
          },
          "layer": [
            {"mark": {"type": "circle"}},
            {
              "mark": {"type": "text", "align": "left", "dx": 4},
              "encoding": {"text": {"field": "Scenario", "type": "nominal"}}
            }
          ]
        }
      ]
    },
    {
      "title": "小型反应堆LCOE",
      "view": {"fill": "white", "strokeOpacity": 0},
      "width": 300,
      // 新增：过滤小型反应堆数据
      "transform": [
        {"filter": "datum.Reactor_Type === 'Small'"}
      ],
      "encoding": {
        "x": {"field": "Year", "type": "temporal", "title": null},
        "y": {"field": "LCOE", "type": "quantitative", "title": null},
        "color": {
          "scale": {"range": ["darkgreen", "teal", "darkblue"]},
          "condition": {
            "param": "hover",
            "field": "Scenario",
            "type": "nominal",
            "legend": null
          },
          "value": "grey"
        },
        "opacity": {"condition": {"param": "hover", "value": 1}, "value": 0.2}
      },
      "layer": [
        {
          "params": [
            {
              "name": "hover",
              "value": [{"Scenario": "Advanced"}],
              "select": {
                "type": "point",
                "fields": ["Scenario"],
                "on": "pointerover"
              }
            }
          ],
          "mark": {
            "type": "line",
            "strokeWidth": 8,
            "stroke": "transparent",
            "point": true
          }
        },
        {"mark": "line"},
        {
          "encoding": {
            "x": {"aggregate": "max", "field": "Year"},
            "y": {"aggregate": {"argmax": "LCOE"}, "field": "price"}
          },
          "layer": [
            {"mark": {"type": "circle"}},
            {
              "mark": {"type": "text", "align": "left", "dx": 4},
              "encoding": {"text": {"field": "Scenario", "type": "nominal"}}
            }
          ]
        }
      ]
    }
  ],
  "config": {
    "legend": {
      "fillColor": "#ffffff",
      "strokeColor": "black",
      "padding": 5,
      "symbolType": "stroke"
    }
  }
}

注意事项 #

• 请根据你CSV中实际的反应堆类型字段名和取值调整filter条件（比如如果字段是Size，值为"大型"和"小型"，则修改为datum.Size === '大型'）。
• 过滤后每个子图表仅包含对应类型的数据，每年只会有一个LCOE值，折线的锯齿状问题也会解决。

内容的提问来源于stack exchange，提问作者Malcamo