d3 remove nodes connected to clicked node

Question

So I am using this example D3 force layout - .exit().remove() just giving back errors on tick event to create my force directed layout.

Now my questions is is there anyway when you right click on remove the node to change the functionality so you do not remove the actual node but nodes connected to it of certain type.

For example like in the image below if I click on A I want to remove anything that is blue and red but do not remove red or blue from c, if I click on b it will not remove anything.

https://i.stack.imgur.com/vLdIe.jpg

I tried and I failed.

Your prose would break any grammatical parser but, I assume you are asking if it is possible to write some js that will deliver the behaviour of deleting all nodes that share a link with the clicked node, without deleting said clicked node. Operating on this assumption, the answer to your question is yes. If you want guidance on how to accomplish this then post your attempt and push yourself to formulate some specific questions about it. — Cool Blue, Aug 20 '15 at 04:58

Cyril Cherian · Answer 1 · 2015-08-20T11:24:05.080

It seems you want to have a selective collapse. That is some nodes should collapse but others should not. To do this you need to make a JSON which indicates that this node will never collapse Excerpts from my JSON The one with type red is collapsible

    {
    "name": "cluster",
        "type": "red",
        "children": [{
        "name": "AgglomerativeCluster",
            "type": "red",
            "size": 3938
    },

The one with type blue is non collapsible shown below

    , {
        "name": "ShortestPaths",
            "type": "blue",
            "size": 5914
    },

In your click function you will remove all other nodes except the one with type blue like shown below

function click(d) {
    if (d3.event.defaultPrevented) return; // ignore drag
    if (!d.collapsed) {
        d.collapsed = true;
        d._children = d.children;
        var openNodes = [];
        //on collapse remove all nodes except the one with type blue.
        d.children.forEach(function (d) {
            if (d.type == "blue") openNodes.push(d);
        });
        d.children = openNodes;
    } else {
        d.collapsed = false;
        d.children = d._children;
        d._children = null;
    }
    update();
}

Full working code is here

Note that in the fiddle on clicking node "cluster" all its children nodes will collapse except node "mergeEdge" because it type is blue.

d3 remove nodes connected to clicked node

1 Answers1