d3.js 点击 Hierarchical Edge Bundling 节点颜色变化

Question

我是 d3.js 的新手，我正在尝试修改此 link 的分层边缘捆绑：https://bl.ocks.org/mbostock/7607999。

我删除了在悬停时显示的 link，并改为在单击时显示。我想对 我单击的节点（突出显示） 执行相同的操作。我已经删除了节点的悬停事件。这是我目前所拥有的 fiddle https://fiddle.jshell.net/vdmn2oj4/.

我该怎么做？

当悬停时，我们可以在css样式中使用"hover"属性，但是点击没有这样的东西（只有links的焦点和文本字段）。

我尝试更改数据并将它们改为 link（这样我就可以在 css 中使用焦点）：

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

但这当然行不通（如果您能以某种方式做到这一点，请告诉我）。并使用 link 的属性，如下所示：

.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

这是您更新后的 fiddle：https://fiddle.jshell.net/vdmn2oj4/3/

d3.js 点击 Hierarchical Edge Bundling 节点颜色变化

d3.js Hierarchical Edge Bundling node color change on click

javascript

css

mouseevent

d3.js

bundle-layout