如何在Deneb折线图X轴上分散City 3的重叠数据点

问题说明 #

City 3的多个数据点在X轴上重叠堆叠，每条City 3记录为独立行，包含Year或YearId字段，希望利用这些字段让点不再重叠，此前尝试detail通道和聚合方法未生效。

当前与期望效果 #

当前图表状态：

期望图表状态：

数据表 #

DemoTable = DATATABLE(
"Year", INTEGER,
"CurrentPlayer", STRING,
"Date", DATETIME,
"YearId", STRING,
"City", STRING,
"Winner", STRING,
"Level", INTEGER,
  {
    {2019,"Bill","04/02/2019","2019-76","City 1","Sue", 4},
    {2019,"Bill","05/02/2019","2019-146","City 2","Sally", 2},
    {2020,"Bill","09/07/2020","2020-205","City 3","Randy", 7},
    {2021,"Bill","05/03/2021","2021-205","City 3","Randy", 3},
    {2022,"Bill","05/02/2022","2022-205","City 3","Andre", 6},
    {2023,"Bill","05/08/2023","2023-205","City 3","Dan", 4},
    {2024,"Bill","05/06/2024","2024-205","City 3","Barry", 5},
    {2025,"Bill","05/05/2025","2025-205","City 3","Barry", 3}
  }
)

当前Deneb配置 #

{
  "width": 570,
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "line",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative",
          "axis": {"title": "Level"}
        },
        "x": {
          "field": "City",
          "type": "nominal",
          "sort": {"field": "Date", "order": "ascending"},
          "axis": {
            "title": "City",
            "labelAngle":-50
          }
        }
      }
    },
    {
      "mark": {
          "type": "point",
          "tooltip": true,
          "filled": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative",
          "axis": {"title": "Level"}
          },
        "x": {
          "field": "City",
          "type": "ordinal",
          "sort": {"field": "Date", "order": "ascending"}
        }
      }
    }
  ]
}

解决方案 #

方案1：保留City标签，添加横向偏移 #

通过xOffset通道基于YearId给City 3的点分配横向偏移，让同组内的点分散开：

{
  "width": 570,
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "line",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative",
          "axis": {"title": "Level"}
        },
        "x": {
          "field": "City",
          "type": "nominal",
          "sort": {"field": "Date", "order": "ascending"},
          "axis": {
            "title": "City",
            "labelAngle": -50
          },
          "bandPosition": 0.5
        },
        "detail": {"field": "YearId"},
        "xOffset": {"field": "YearId", "type": "ordinal", "scale": {"range": [-20, 20]}}
      }
    },
    {
      "mark": {
        "type": "point",
        "tooltip": true,
        "filled": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative"
        },
        "x": {
          "field": "City",
          "type": "nominal",
          "sort": {"field": "Date", "order": "ascending"},
          "bandPosition": 0.5
        },
        "detail": {"field": "YearId"},
        "xOffset": {"field": "YearId", "type": "ordinal", "scale": {"range": [-20, 20]}}
      }
    }
  ]
}

• 核心调整：新增xOffset通道，用YearId作为偏移依据，range值可根据点的数量调整，确保点不重叠；bandPosition:0.5让City分组居中，偏移更对称。

方案2：将X轴改为City+Year组合标签 #

通过计算字段把City和Year拼接，让每个年份的City 3成为独立X项：

{
  "width": 570,
  "data": {"name": "dataset"},
  "transform": [
    {
      "calculate": "datum.City + ' ' + datum.Year",
      "as": "CityYear"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "line",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative",
          "axis": {"title": "Level"}
        },
        "x": {
          "field": "CityYear",
          "type": "nominal",
          "sort": {"field": "Date", "order": "ascending"},
          "axis": {
            "title": "City & Year",
            "labelAngle": -50
          }
        }
      }
    },
    {
      "mark": {
        "type": "point",
        "tooltip": true,
        "filled": true
      },
      "encoding": {
        "y": {
          "field": "Level",
          "type": "quantitative"
        },
        "x": {
          "field": "CityYear",
          "type": "nominal",
          "sort": {"field": "Date", "order": "ascending"}
        }
      }
    }
  ]
}

• 核心调整：用transform生成CityYear字段作为X轴分类，每个City 3的年份都对应独立的X位置，彻底避免重叠。

问题根源 #

原配置中X轴仅以City为分类字段，所有City 3的记录都会映射到同一个X坐标，导致点重叠。detail通道仅用于区分数据分组，不会改变点的位置，因此需要通过偏移或修改分类字段来实现点的分散。

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