В d3 Force-Directed Graph вытащите аналогичные узлы вместе.

Question

Stuck at the following output

В показанном виде каждый узел назван как [город, штат] и случайно помещен. Мне было интересно, есть ли способ потянуть города с одинаковыми состояниями ближе или ближе друг к другу по отношению к другим государствам.

Ссылка на массив данных (ссылки): 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

Answer 2

Вы можете дать узлам свойство группы, а затем использовать эти данные, чтобы положить их вместе в пути.

Взгляните на этом примере: http://bl.ocks.org/GerHobbelt/3071239

При нажатии на больших узлах, она будет расширяться на более мелкие узлы с одной и той же группой, кластерной внутри пути.