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运行的数据，因此您感兴趣的d ID实际为d.key而不是d.siteID，在那个级别上不存在。所以classed里面的布尔值应该是

return d.key == id.siteID

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

Answer 2

要在d3中绑定click事件，您应该选择具有该类的对象并绑定点击：

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

d3点击事件的互动

2 个答案: