Question

在显示的输出中，每个节点都被命名为[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

您可以为节点提供组属性，然后使用该数据将它们放在路径中。

看看这个例子： http://bl.ocks.org/GerHobbelt/3071239

当您点击较大的节点时，它将扩展为较小的节点，同一组聚集在路径中。

Answer 2

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

.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

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

2 个答案: