D3.js - Collapsible Force Layout - marking nodes and links


I have been working with d3.js - Collapsible Force Layout: http://bl.ocks.org/mbostock/1093130 and thought I could use it as a basis for navigation through more complex HTML pages.

Here is a what i have at the moment

Is it possible that the node gets outlined when clicked on? (Most ideally also the link from the parent node).

d3.json("graph.json", function(error, json) {
  root = json;
  update();
});

//new code
var collapseMe = flatten(root);
for(var j = 0; j< collapseMe.length; j++){click(collapseMe[j])};

My intention is shown in this picture: illustration

ps: i have created another thread about expanding the nodes here: d3.js - Collapsible Force Layout only partially collapsed so it should expand, get outlined and at the same time link to an iframe.

Hope it's not too complex.

I will appreciate any help.

Best regards,

UPDATED 14.1.2016:

Thanks to comments to the original question I have been able to create a click event that marks the node and it's link when selected - see here. However when the node is expanded all the links leading to the node are marked. Is it possible that only the link, leading to the parent is marked? My intention is to show only one "path" leading to the parent node.

I believe the answer lies in this piece of code function neighbouring() and function click(d):

function neighboring(a, b) {
  return a.index == b.index || linkedByIndex[a.index + "," + b.index];
}

function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();

  d3.selectAll(".link").transition().duration(500)
  .style("stroke-width", function(o) {
    return o.source === d || o.target === d ? 3 : 1;
  }).style("stroke", function(o) {
    return o.source === d || o.target === d ? "red" : "grey";
  });

  d3.selectAll(".node").transition().duration(500)
    .style("stroke-width", function(o) {
       return neighboring(d, o) ? 1 : 0;
    }).style("stroke", function(o) {
       return neighboring(d, o) ? "red" : "white";
    });
}

Answers: