D3js強制佈局與矩形文本組重疊

Question

嗨，我想使用強制佈局的d3js ...我創建g元素與矩形和裏面的文本。並施加力量，但它們重疊。我認爲它不能解決矩形的大小。我究竟做錯了什麼？

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]); 

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

nodes.push({ 
w: 100, 
h: 50, 
val: 'dada' 
}); 

nodes.push({ 
    w: 100, 
    h: 50, 
    val: 'zona' 
}); 

// Restart the layout. 
force.start(); 

var node = vis.selectAll("g") 
    .data(nodes) 
.enter() 
.append("g") 
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
.call(force.drag); 

node.append("rect") 
    .attr("width", function(d) { return d.w; }) 
    .attr("height", function(d) { return d.h; }) 
    .style("fill", "#eee") 
    .style("stroke", "white") 
    .style("stroke-width", "1.5px") 

node.append("text") 
    .text(function(d) { return d.val; }) 
    .style("font-size", "12px") 
    .attr("dy", "1em") 

Answer 1

有跡象表明，你可以在你d3.layout.declaration（）設置，讓你來處理重疊，如屬性：

var force = d3.layout.force() 
    .nodes(nodes) 
    .links([]) 
    .gravity(0.05) 
    .charge(-1500) 
    .linkDistance(100) 
    .friction(0.5) 
    .size([w, h]); 

重要提示：我從借來的數據在別的地方並運行代碼。所以，上面的值需要由你來調整。希望這可以幫助。