單擊d3.js分層邊緣捆綁節點顏色更改

Question

我是d3.js的新手，並且正在嘗試通過以下鏈接修改Hierarchical Edge Bundling： https ://bl.ocks.org/mbostock/7607999。

我已經刪除了懸停顯示的鏈接，而是點擊了 。 我想對單擊的節點執行相同的操作（突出顯示） 。 我已刪除該節點的懸停事件。 這是我到目前為止https://fiddle.jshell.net/vdmn2oj4/的小提琴。

我怎樣才能做到這一點？

當鼠標懸停時，我們可以僅使用css樣式的“ hover”屬性，但是單擊時就沒有這種情況（僅將焦點放在鏈接和文本字段上）。

我試圖更改數據並改為使其鏈接（以便可以在CSS中使用focus）：

 <a href='#' onclick='return true;'>data</a>

但這當然是行不通的（不過請告訴我您是否可以這樣做）。 並為鏈接使用屬性，如下所示：

.attr({"xlink:href": "#"})

也不起作用，因為我無法通過css改變其樣式（或者我不知道如何，但是如果可以的話，這可能會解決我的問題）。

我也嘗試過操縱節點，但是到目前為止，我只能更改所有節點，源和目標，但不能更改單擊的節點。

我也知道節點有一個“ parent ”屬性，這可能是我想要的屬性，但是我也沒有找到如何使用它的屬性。

任何解決方案，甚至是部分解決方案都將受到歡迎，因為我已經在此方面花費了大量時間。

Answer 1

將此添加到您的function mouseclick ：

d3.select(".node--clicked")
    .classed("node--clicked", false);//removes the class of previously clicked nodes
var clicked = d3.select(this);//select the clicked element
clicked.classed("node--clicked", true);//set the class

這是您更新的小提琴： https : //fiddle.jshell.net/vdmn2oj4/3/