d3互动点击事件

Question

我有一个d3圈显示网站位置的地图，以及显示每个网站的时间趋势的线图。我正在尝试在单击相应的圆时突出显示一条线。代码是Here。我似乎无法给的siteId具有以下功能连接：

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

Answer 1

插入console.log，如下图所示，它应该变得更加清晰：

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

因为你绑定到你已经通过d3.nest运行数据的的ID你感兴趣的实际上是d.key而不是d.siteID，这在该级别上不存在。所以里面classed布尔应该

return d.key == id.siteID 

这将导致相应的趋势线的<g>有一个“G-亮点”级，但它仍然不会明显颜色就行了。我相信这是因为你的css规则.g-highlight { stroke:... }将笔划应用于包含<g>而不是其中的<path>。您可以将该css规则更改为.g-highlight path { ... }，并根据需要着色该路径。

Answer 2

要绑定D3中的点击事件，你应该选择与该类对象并绑定点击：

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