如何为Observable Plot标记关联对应路径并受控设置类/ID？

你可以通过D3 Plot的通道属性绑定功能，给生成的路径（path）和标记元素动态添加自定义类名或数据属性，以此实现标记与对应路径的可靠关联，完全不需要依赖DOM顺序或手动构建路径。

具体实现步骤： #

1. 给路径添加分组类名
   在Plot.line配置中，通过className通道根据数据的分组字段生成唯一类名：

   Plot.line(data, {
     x: "date",
     y: "value",
     stroke: "category",
     className: d => `line-group-${d.category}` // 按分组字段生成类名
   })
   

2. 给标记添加对应分组类名
   对应的标记（比如Plot.dot）也使用相同的分组字段生成类名，保持关联：

   Plot.dot(data, {
     x: "date",
     y: "value",
     fill: "category",
     className: d => `dot-group-${d.category}`
   })
   

3. 交互时关联路径与标记
   交互（如鼠标悬停）时，通过分组字段直接定位对应的路径元素，不受DOM层级变化（比如raise()）影响：

   d3.selectAll(".dot-group").on("mouseover", function(event, d) {
     d3.select(`.line-group-${d.category}`).classed("highlight", true);
   });
   
   d3.selectAll(".dot-group").on("mouseout", function(event, d) {
     d3.select(`.line-group-${d.category}`).classed("highlight", false);
   });
   

替代方案：使用数据属性 #

如果不想用类名，也可以通过attr方法添加自定义数据属性：

Plot.line(data, {
  x: "date",
  y: "value",
  stroke: "category",
  attr: { "data-group": d => d.category }
})

交互时通过数据属性选择：

d3.select(`[data-group="${d.category}"]`).classed("highlight", true);

这种方式完全依托Plot的抽象能力，不需要手动处理DOM结构，也能避开checkIntersection对非闭合路径无效的问题。

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