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; 
});