1

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";
    });
}
Community
  • 1
  • 1
matus
  • 53
  • 8
  • See https://stackoverflow.com/questions/8739072/highlight-selected-node-its-links-and-its-children-in-a-d3-force-directed-grap and https://stackoverflow.com/questions/27313345/how-do-i-highlight-select-neighbours-of-neighbours-in-d3-force-layout and https://stackoverflow.com/questions/23067154/highlight-a-node-and-its-neighbour-node-in-force-directed-graph – Lars Kotthoff Jan 13 '16 at 17:14
  • Thank you @LarsKotthoff. I went through those examples. However I could not figure it out. The diagrams are different in each case. [this is closest to what i'm looking for](http://plnkr.co/edit/3fv3IR3S3Kp86rAummnz?p=preview) i think you made it. The thing is that I would like the connection to be marked on click (not mouse over) and I do not need all the other nodes to fade. I tried to copy part of the code (the on mouse part) into mine but it did not work. – matus Jan 13 '16 at 17:55
  • For that you just need to change the mouseover to a click handler and the setting of the attribute values accordingly: http://plnkr.co/edit/X8Z3Fq33ItirYxRXJIgO?p=preview – Lars Kotthoff Jan 14 '16 at 04:20
  • Thank you again @LarsKotthoff. With your example I have almost achieved what I was looking for. However when the node is expanded at the moment all the links of the node are marked. Is there a way that only the link that leads to the parent node is marked? (btw, I still need to work on collapsing/expanding the nodes that's not ready either). – matus Jan 14 '16 at 14:45
  • There's no "parent" information in the data format at the moment, so you'd need to define that. You could for example modify the checks to only take `o.target` into account and not `o.source`. – Lars Kotthoff Jan 14 '16 at 17:36
  • Thank you so much @LarsKotthoff. You're a master at this. Now it marks the link connected to the previous node (as I wanted) and not all the links. Is there a way it would mark the link as it does but as well the previous ones leading to the parent node (the 1st node) so when I unclick the diagram and get further away with the tree the whole path is marked? I really appreciate your comments! – matus Jan 15 '16 at 07:55
  • Yes, you just have to call the highlighting thing recursively. The first question I've linked to above does that. – Lars Kotthoff Jan 15 '16 at 17:20

0 Answers0