JS / d3.js：为源/目标链接创建组

Question

I have been trying to colour some nodes based on their links but I am not sure how to do so. Here is my current graph:

I have been trying to automatically colour all nodes that are within the same cluster (ie Connected to each other either by being a source or a target to any node within the cluster), but so far all my attempts have been futile..

I heard that I might need to do a recursive function, but my recursion is self-taught and is fundamentally wrong. Here is my current code:

function assignGroup() {
var groupedNodes = [];

for(var i = 0; i < gNodes.length; i++) {
    if(nodes[i].group !== undefined) {
        nodes[i].group = undefined;
    }
}

for(var i = 0; i < nodes.length; i++) {
    if(nodes[i].group === undefined) {
        nodes[i].group = i;
        recursive(nodes[i],i);
    }
}


function recursive(rNode, rGrp) {       
    var tempSrc = hasSrc(rNode);        
    var tempTarg = hasTarg(rNode);

    if(tempSrc == null && tempTarg == null)
        return;

    if(tempSrc != null && tempSrc.group === undefined) {
        tempSrc.group = rGrp;
        recursive(tempSrc, rGrp);
    }

    if(tempTarg != null && tempTarg.group === undefined) {
        tempTarg.group = rGrp;
        recursive(tempTarg, rGrp);
    }
}

function hasTarg(eNode) {
    for(var i = 0; i < edges.length; i++) {
        if(nodes.name == edges[i].source)
            return getNode(nodes, edges[i].target);
        else
            return null;
    }
}

function hasSrc(eNode) {
    for(var i = 0; i < edges.length; i++) {
        if (nodes.name == edges[i].target)
            return getNode(edges[i].source);
        else
            return null;
    }
}

function getNode(id) {
    console.log(id);
    for(var i = 0; i < nodes.length; i++) {
        if(id == nodes[i].name) {
            return nodes[i];
        }
    }
    return null;
}

My approach is to assign a group to each node, and to colour them based on their group, essentially tackling two birds with one stone (Group can be used for future implementations as well).

My dataset is:

{
"nodes":
[
 {
   "name": "Ben",
},
 {
   "name": "May",
},
 {
   "name": "Jack",
},
 {
   "name": "Francis",
},
 {
   "name": "Owen",
},
 {
   "name": "Blake",
},
 {
   "name": "Julia",
},
 {
   "name": "Liam",
}
],
"edges":
[
    {
        "source":"Ben",
        "target":"May"
    },
    {
        "source":"Ben",
        "target":"Blake"
    },
    {
        "source":"Ben",
        "target":"Owen"
    },
    {
        "source":"Owen",
        "target":"Julia"
    }
]
}

Here is the intended outcome of my dataset for node:

"nodes":
[
 {
   "name": "Ben",
   "group": 1
},
 {
   "name": "May",
   "group": 1
},
 {
   "name": "Jack",
   "group": 2 /*Arbitrary group (Ungrouped)*/
},
 {
   "name": "Francis",
   "group": 3 /*Arbitrary group (Ungrouped)*/
},
 {
   "name": "Owen",
   "group": 1
},
 {
   "name": "Blake",
   "group": 1
},
 {
   "name": "Julia",
   "group": 1
},
 {
   "name": "Liam",
   "group": 4 /*Arbitrary group (Ungrouped)*/
}
]

Edit: Here is the jsfiddle: https://jsfiddle.net/ehnf76xg/2/

Answer 1

This is my solution. First, we give each node a different number:

data.nodes.forEach(function(d, i) {
    d.group = i
});

The numbers themselves don't matter, as you know.

Then we check, for each node, if its name is found at the source or target of each object in the edges array. If yes, we give its number to both source and target correspondents in the nodes array:

data.nodes.forEach(function(d) {
    data.edges.forEach(function(e) {
        if (e.source === d.name || e.target === d.name) {
            data.nodes.find(function(f) {
                return f.name === e.source
            }).group = d.group;
            data.nodes.find(function(f) {
                return f.name === e.target
            }).group = d.group;
        }
    })
})

This is just like an infectious process: the first node whose name is found either on source or target spreads its number. Again, the number itself doesn't matter.

Here is a demo:

 var data = { "nodes": [{ "name": "Ben", }, { "name": "May", }, { "name": "Jack", }, { "name": "Francis", }, { "name": "Owen", }, { "name": "Blake", }, { "name": "Julia", }, { "name": "Liam", }], "edges": [{ "source": "Ben", "target": "May" }, { "source": "Ben", "target": "Blake" }, { "source": "Ben", "target": "Owen" }, { "source": "Owen", "target": "Julia" }] }; data.nodes.forEach(function(d, i) { d.group = i }); data.nodes.forEach(function(d) { data.edges.forEach(function(e) { if (e.source === d.name || e.target === d.name) { data.nodes.find(function(f) { return f.name === e.source }).group = d.group; data.nodes.find(function(f) { return f.name === e.target }).group = d.group; } }) }) console.log(data) 

Now, let's see it in a real force directed chart:

 var data = { "nodes": [{ "name": "Ben", },{ "name": "May", }, { "name": "Jack", }, { "name": "Liam", },{ "name": "Francis", }, { "name": "Owen", }, { "name": "Blake", }, { "name": "Julia", }], "edges": [{ "source": "Ben", "target": "May" }, { "source": "Ben", "target": "Blake" }, { "source": "Ben", "target": "Owen" }, { "source": "Owen", "target": "Julia" }] }; data.nodes.forEach(function(d, i) { d.group = i }); data.nodes.forEach(function(d) { data.edges.forEach(function(e) { if (e.source === d.name || e.target === d.name) { data.nodes.find(function(f) { return f.name === e.source }).group = d.group; data.nodes.find(function(f) { return f.name === e.target }).group = d.group; } }) }) var svg = d3.select("svg") var force = d3.forceSimulation() .force("link", d3.forceLink() .id(function(d) { return d.name })) .force("charge", d3.forceManyBody().strength(-2)) .force("collide", d3.forceCollide(15)) .force("center", d3.forceCenter(150, 70)); var edges = svg.selectAll("line") .data(data.edges) .enter() .append("line") .style("stroke", "#aaa") .style("stroke-width", 2); var color = d3.scaleOrdinal(d3.schemeCategory10); var nodes = svg.selectAll("circle") .data(data.nodes) .enter() .append("circle") .attr("r", 10) .style("stroke", "#444") .style("stroke-width", 2) .style("fill", function(d) { return color(d.group); }) force.nodes(data.nodes); force.force("link") .links(data.edges); force.on("tick", function() { edges.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }) nodes.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); }); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>