d3：在节点旁边添加标签

Question

我正在尝试在力布局图中的每个节点旁边添加标签。但是，所有标签都显示在屏幕的左上方。我看了很多其他类似问题的stackoverflow问题，我有信心说我尝试了不同的解决方案，但我似乎仍然有这个问题。在下图中，您可以看到堆叠在一起的所有标签。

以下是我初始化节点，节点和文本图像的方法：

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

  node.append("image")
      .attr("xlink:href", "../icons/workstation.png")
      .attr("x", -25)
      .attr("y", -25)
      .attr("width", 50)
      .attr("height", 50);

  var text = node.append("text")
        .attr("dx", ".35em")
        .attr("dy", ".35em")
        .text(function(d){ return d.ip});

我为x＆amp;尝试了许多不同的值y和/或dx＆amp; dy但结果是一样的。 这是我的on tick方法，用于在tick上更新图形：

 force.on("tick", function() {


    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

});