javascript - 在 d3 Force-Directed Graph 中，将相似的节点拉到一起。

Question

Stuck at the following output

在显示的输出中，每个节点都被命名为 [city, state] 并且随机放置。我想知道是否有一种方法可以使具有相同状态的城市相对于其他状态更接近或更接近。

链接到数据数组(链接):http://pastebin.com/rrYkv7HN

到目前为止的代码:

var nodes = {};
// Compute the distinct nodes from the links.
  links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name:link.source+", "+link.cstate});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target+", "+link.sstate});
});
   var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([w, h])
    .linkDistance(200)
    .charge(-300)
    .on("tick", tick)
    .start();

var g3 = d3.select("#graph").append("svg")
    .attr("width", w)
    .attr("height", h);

var link = g3.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link");

var node = g3.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .style("fill", "red")
    .attr("r", 8);

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

function tick() {
    link
        .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; });

    node
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

Answer 1

您可以根据节点的状态更新距离。

.linkDistance(function(d){
      if(d.cstate == d.sstate)
        return 80;//similar state will be close
      else 
        return 200;//non similar state will be far
    })

工作示例 here