javascript - How to make my D3 lines Split? -

i have created node map has multiple nodes line/arrows going between each node. have recreated code here: https://jsfiddle.net/garrettuk/51j2rx1t/. wondering if show me how go creating on-click function on lines when line clicked... 2 more lines shown. when clicked have line clicked in middle , 2 new lines either side.

i've started creating on-click function seen in example. had theory create 2 lines connect each node have them hidden. when click on line. function switches these lines hidden show.

my on-click function looks in example:

.on("click", function(){       // determine if current line visible       var active   = redline.active ? false : true ,         newopacity = active ? 0 : 1;       // hide or show elements       d3.select("#redline").style("opacity", newopacity);       // update whether or not elements active       redline.active = active;     });