Observable Plot v0.6多独立折线图自动生成图例问题求助

问题根源 #

Observable Plot的自动图例生成依赖数据的分类映射逻辑：只有当Plot能识别出数据中的系列分类（比如通过color编码某个字段），才会自动生成对应图例。你之前的写法是给每个lineY传入独立数据数组，既没有把系列标识（CH1/CH2）融入数据结构，手动指定stroke也没有关联统一的颜色比例尺，所以Plot无法识别这是两个不同的系列，自然不会生成图例。

方案1：使用长格式数据（推荐，适配大数据量） #

把所有折线的数据合并成一个包含系列标识的数组，用单个lineY标记通过color字段绑定系列，Plot会自动生成图例和分配颜色：

b.html('').append('li').node().append(Plot.plot({
  color: {legend: true},
  marks: [
    Plot.lineY(
      // 长格式数据：每个点包含x、y、所属系列
      [
        {x:1, y:1, series:"CH1"}, {x:2, y:4, series:"CH1"}, {x:3, y:2, series:"CH1"}, 
        {x:4, y:5, series:"CH1"}, {x:5, y:3, series:"CH1"}, {x:6, y:6, series:"CH1"},
        {x:1, y:2, series:"CH2"}, {x:2.5, y:4, series:"CH2"}, {x:4.5, y:1, series:"CH2"}, 
        {x:6, y:5, series:"CH2"}
      ],
      {x: "x", y: "y", color: "series"} // 用color字段映射系列
    )
  ]
}))

这种结构紧凑，适合数千点的大数据场景，完全符合Plot的设计范式，无需手动处理颜色和图例。

方案2：保留独立数据数组，手动关联颜色比例尺 #

如果不想调整数据结构，可以先定义统一的颜色比例尺，给每个折线指定对应颜色，再单独渲染图例并插入页面（注意Plot.legend不是标记，不能放在marks数组里）：

// 定义分类颜色比例尺，指定系列和对应颜色
const colorScale = d3.scaleOrdinal()
  .domain(["CH1", "CH2"])
  .range(d3.schemeCategory10); // 使用内置配色方案

// 绘制折线图
const chart = Plot.plot({
  marks: [
    Plot.lineY({length:6}, {y:[1,4,2,5,3,6],x:[1,2,3,4,5,6], stroke: colorScale("CH1")}),
    Plot.lineY({length:4}, {y:[2,4,1,5],x:[1,2.5,4.5,6], stroke: colorScale("CH2")}),
  ]
});

// 绘制图例
const legend = Plot.legend({color: colorScale});

// 清空body，同时添加图表和图例
b.html('')
  .append('div').node().append(chart)
  .parentNode.appendChild(legend);

这种方式保持了数据的独立性，同时通过统一的比例尺确保折线颜色和图例一致。

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