d3.js Hierarchical Edge Bundling node color change on click

Question

I am new to d3.js, and I am trying to modify the Hierarchical Edge Bundling from this link: https://bl.ocks.org/mbostock/7607999.

I have removed the links being displayed on hover, and put the on click instead. I would like to do the same with the node that I click on (highlight it). I have removed the hover event for the node. here is a fiddle of what I have so far https://fiddle.jshell.net/vdmn2oj4/.

How can I do this?

When it was on hover, we could just use the "hover" attribute in the css style, but there is no such thing with a click (only focus for links and textfields).

I have tried to change the data and make them links instead (so I could use focus in css):

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

but of course that didn't work (let me know if you can do that somehow though). and using an attribute for links like so:

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

doesn't work either because I cannot change its style on focus with css (or I don't know how, but that might solve my problem if I could).

I have also tried manipulating the nodes, but so far, I have only been able to change all the nodes, the sources and the targets, but not the one I click on.

I also know that there is a "parent" attribute to nodes, which might be the ones I want, but I haven't found out how to use that either.

Any solution, even partial would be welcome, as I have spend a lot of time on this already.

Answer 1

Add this inside your 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

Here is your updated fiddle: https://fiddle.jshell.net/vdmn2oj4/3/