D3 Force布局 - 子图聚类功能

我有一些数据，我试图用D3强制布局显示。道歉如果这是一个天真的问题，或者如果我在问题标题中使用的术语不准确。我无法看到我正在寻找的答案。D3 Force布局 - 子图聚类功能

我做了一个小提琴与样品展示我在这里大概什么：

http://jsfiddle.net/stevendwood/f3GJT/8/

enter image description here

在这个例子中我有一个节点（0），其中有很多链接。另一个节点（16）的链接数量较少，0和16都连接到15.

所以我想为0和16是小群集与他们的连接节点出现在他们周围一个很好的圆。

我徒然试图根据链接的数量来定制费用，但我认为我想要做的是以某种方式使节点更多地吸引到它们连接的节点，并且更少地吸引到它们未连接的节点。

我想是这样的，如果可能的：

enter image description here

var w = 500, 
h = 500, 
nodes = [], 
links = []; 

/* Fake up some data */ 
for (var i=0; i<20; i++) { 
    nodes.push({ 
     name: ""+i 
    }); 
} 

for (i=0; i<16; i++) { 
    links.push({ 
     source: nodes[i], 
     target: nodes[0] 
    }); 
} 

links.push({ 
    source: nodes[16], 
    target: nodes[15] 
}); 

for (i=17; i<20; i++) { 

    links.push({ 
     source: nodes[i], 
     target: nodes[16] 
    }); 
} 

var countLinks = function(n) { 
    var count = 0; 
    links.forEach(function(l) { 
     if (l.source === n || l.target === n) { 
      count++; 
     } 
    }); 

    return count; 
} 

///////////////////////////////////////////// 

var vis = d3.select("body").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

var force = d3.layout.force() 
    .nodes(nodes) 
    .links([]) 
    .gravity(0.05) 
    .charge(function(d) { 
     return countLinks(d) * -50;  
    }) 
    .linkDistance(300) 
    .size([w, h]); 


var link = vis.selectAll(".link") 
     .data(links) 
     .enter().append("line") 
     .attr("class", "link") 
     .attr("stroke", "#CCC") 
     .attr("fill", "none"); 

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

node.append("svg:circle") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", 14) 
    .style("fill", "#CCC") 
    .style("stroke", "#AAA") 
    .style("stroke-width", 1.5) 

node.append("text").text(function(d) { return d.name; }) 
    .attr("x", -6) 
    .attr("y", 6); 

force.on("tick", function(e) { 
    node.attr("transform", function(d, i) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

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

force.start();

来源

2013-05-13 Woody

你真的不能与没有自定义修改的力布局实现这一目标。我建议查看其他布局，或者，如果您知道自己需要什么，只需静态指定布局即可。 – 2013-05-13 17:51:03

声明力量布局时，你为什么离开了链接？如果你在后面添加这些，它看起来更接近你想要的东西：

var force = d3.layout.force() 
    .nodes(nodes) 
    //.links([]) 
    .links(links) 
    .gravity(0.1) 
    .charge(-400) 
    .linkDistance(75) 
    .size([w, h]);

http://jsfiddle.net/f3GJT/11/

enter image description here

来源

2013-05-13 21:40:25

啊 - 非常感谢你！ – Woody 2013-05-14 11:25:03

D3 Force布局 - 子图聚类功能

回答

相关问题