问点击事件上的d3交互

EN

插入一个console.log，如下所示，它应该更加清晰：

function highlightLine(id) {
    lineGroup.classed("g-highlight", function(d) {
      console.log(d);
      return d.siteID == id.siteID;
    });
};

因为您要绑定到通过d3.nest运行的数据，所以您感兴趣的d的id实际上是d.key而不是d.siteID，它在那个级别上不存在。所以classed内部的布尔值应该是

return d.key == id.siteID

这将导致适当的趋势线的<g>有一个“g-突出显示”类，但是它仍然不会明显地显示这条线的颜色。我相信这是因为您的css规则.g-highlight { stroke:... }将笔画应用于包含<g>而不是其内部的<path>。您可以将css规则更改为.g-highlight path { ... }，这将为您想要的路径添加颜色。

要在d3中绑定单击事件，您应该使用该类选择对象并绑定单击：

d3.selectAll(".g-highlight").on("click", function(d) {
    return d.siteID == id.siteID;
 });