矩形文本组重叠的 D3js 强制布局答案

【问题标题】：D3js force layout with rectangle text groups overlapping矩形文本组重叠的 D3js 强制布局
【发布时间】：2014-02-17 23:26:16
【问题描述】：

您好，我正在尝试使用 d3js 的强制布局...我正在创建 g 元素，其中包含 rect 和文本。并施加力量，但它们重叠。我认为它不能解决矩形的大小。我做错了什么？

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")

【问题讨论】：

标签： d3.js force-layout

【解决方案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]);

重要提示：我从其他地方借用了数据并运行了代码。因此，您需要调整上述值。希望这会有所帮助。

【讨论】：