javascript - JS/d3.js : Creating groups for source/target links

Question

我一直在尝试根据链接为某些节点着色，但我不确定该怎么做。这是我当前的图表:

我一直在尝试自动为同一集群内的所有节点着色(即通过作为集群内任何节点的源或目标相互连接)，但到目前为止，我所有的尝试都是徒劳的。 .

我听说我可能需要做一个递归函数，但是我的递归是自学的，而且从根本上是错误的。这是我当前的代码:

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;
}

我的方法是为每个节点分配一个组，并根据它们的组为它们着色，本质上是一石二鸟(组也可以用于 future 的实现)。

我的数据集是:

{
"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"
    }
]
}

这是我的节点数据集的预期结果:

"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)*/
}
]

编辑:这是 jsfiddle:https://jsfiddle.net/ehnf76xg/2/

Answer 1

这是我的解决方案。首先，我们给每个节点一个不同的编号:

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

如您所知，数字本身并不重要。

然后我们检查每个节点的名称是否在 edges 数组中每个对象的 source 或 target 中找到。如果是，我们将其编号提供给 nodes 数组中的源和目标通讯员:

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;
        }
    })
})

这就像一个感染过程:在 source 或 target 上找到名称的第一个节点传播它的编号。同样，数字本身并不重要。

这是一个演示:

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)

现在，让我们在一个真实的力导向图中看到它:

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 d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    });

});

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