0

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.

enter image description here

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.

MorganFR
  • 331
  • 3
  • 19

1 Answers1

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/

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • 1
    That's on the right track! I wanna make it into a third color though for instance .node--click { fill: #00BFFF;} (it is in the fiddle's css). When I change "node--sourc, truee" to "node--click, true", the color isn't removed when i click on another node. Any advice? – MorganFR Jun 29 '16 at 14:44
  • Thank you very much, that edited function works now. – MorganFR Jun 29 '16 at 14:52