d3.js Hierarchical Edge Bundling 节点颜色在点击时改变

Question

我是 d3.js 的新手，我正在尝试通过以下链接修改 Hierarchical Edge Bundling：https://bl.ocks.org/mbostock/7607999。

我已删除显示在 悬停 上的链接，而是将其放在 click 上。我想对 我单击的节点（突出显示它） 执行相同的操作。我已经删除了节点的悬停事件。这是我迄今为止所拥有的https://fiddle.jshell.net/vdmn2oj4/。

我该怎么做？

当它处于悬停状态时，我们可以只使用css样式中的“悬停”属性，但是单击时没有这样的事情（仅针对链接和文本字段的焦点）。

我已尝试更改数据并改为链接（因此我可以在 css 中使用焦点）：

 <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/