javascript - d3 点击事件交互

Question

我有一张带有 d3 个圆圈的 map ，显示站点位置，以及显示每个站点的时间趋势的折线图。我试图在单击相应的圆圈时突出显示特定的行。 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;
    });
};

因为您要绑定(bind)到您已经运行过的数据 d3.nest ，id为d您感兴趣的实际上是 d.key不是d.siteID ，在该级别上不存在。所以里面的 bool 值classed应该是

return d.key == id.siteID

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