如何在 D3 节点中偏移文本答案

【问题标题】：How to offset text in D3 node如何在 D3 节点中偏移文本
【发布时间】：2013-03-06 19:46:42
【问题描述】：

我正在尝试使用 D3 javascript 库来制作一个力导向图，并且我想偏移附加到我的节点的文本。但是，我似乎尝试更改的任何属性都不会对此产生影响。相反，我的文本会覆盖在节点上，很难阅读：

这是我添加文本的方式：

  node.append("text")
      .attr("dy", -3)
      .attr("text-anchor", "right")
      .style("color", "white", null)
      .text(function(d) { return d.name; });

我尝试了 dx 和 dy 的不同值，但似乎没有任何东西可以抵消文本。它看起来总是一样的。

编辑：完整代码（http://g.nychis.com/force-directed.zip 并打开 force-edges-names.html）

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="d3.v2.js"></script>
    <style type="text/css">

div.node {
  border-radius: 12px;
  width: 24px;
  height: 24px;
  margin: -6px 0 0 -6px;
  position: absolute;
}

div.link {
  position: absolute;
  border-bottom: solid #999 1px;
  height: 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

    </style>
  </head>
  <body bgcolor="#000000">
  <FONT COLOR="#FFFFFF">Floor: 1</FONT>
    <script type="text/javascript">

var width = 700,
    height = 500,
    radius = 6,
    fill = d3.scale.category20();

var force = d3.layout.force()
    .gravity(0)
    .charge(-100)
    .linkDistance(function(d) { return (d.value-d.sub)*8; })
    .size([width, height]);

var vis = d3.select("body").append("div")
    .style("width", width + "px")
    .style("height", height + "px");

d3.json("home.json", function(json) {
  var link = vis.selectAll("div.link")
      .data(json.links)
    .enter().append("div")
      .attr("class", "link");

  var node = vis.selectAll("div.node")
      .data(json.nodes)
    .enter().append("div")
      .attr("class", "node")
      .style("background", function(d) { return fill(d.group); })
      .style("border-color", function(d) { return d3.rgb(fill(d.group)).darker(); })
      .call(force.drag);

  node.append("text")
        .style("color", "white", null)
      .text(function(d) { return d.name; });

  force
      .nodes(json.nodes)
      .links(json.links)
      .on("tick", tick)
      .start();

  function tick() {
    node.style("left", function(d) { return (d.x = Math.max(radius, Math.min(width - radius, d.x))) + "px"; })
        .style("top", function(d) { return (d.y = Math.max(radius, Math.min(height - radius, d.y))) + "px"; });

    link.style("left", function(d) { return d.source.x + "px"; })
        .style("top", function(d) { return d.source.y + "px"; })
        .style("width", length)
        .style("-webkit-transform", transform)
        .style("-moz-transform", transform)
        .style("-ms-transform", transform)
        .style("-o-transform", transform)
        .style("transform", transform);
  }

  function transform(d) {
    return "rotate(" + Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI + "deg)";
  }

  function length(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y;
    return Math.sqrt(dx * dx + dy * dy) + "px";
  }
});

    </script>
  </body>
</html>

【问题讨论】：

节点是什么元素？
SVG 的 text-anchor 样式可以有值 start、middle 和 end；它不同于 HTML 的 text-align 属性，它使用左、中和右。

标签： javascript d3.js label force-layout

【解决方案1】：

您可以翻译文本元素：

node.append("div")
    .style("transform", "translate(0px,-10px)")
    ...
    .html(...);

“转换”属性的名称取决于您使用的浏览器，请参阅here。您可能想要设置所有这些。

【讨论】：

不幸的是，这似乎也没有任何作用
啊，我假设您正在生成一个 SVG。已更新。
仍然没有做任何事情：\
刚刚意识到 HTML 中没有“文本”元素。不过应该使用“div”。
div 仍然没有运气...这是代码的压缩包：g.nychis.com/force-directed.zip ...只需打开 force-edges-names.html，您就会看到翻译没有' t改变它

【解决方案2】：

node.append("text")
  .attr({
    "dy": -3,
    "transform": "translate(" + 15 + "," + 5 + ")"
  })
  .style("color", "white", null)
  .text(function(d) { return d.name; });

【讨论】：