Question

我使用d3.js创建强制图。阵列节点和链接是动态填充的。我调用函数start（）之后

function start() {
    link = link.data(force.links(), function (d) {
        return d.source.id + "-" + d.target.id;
    });

    link.enter().insert("line", ".node").attr("class", "link");
    link.exit().remove();
    node = node.data(force.nodes(), function (d) { return d.id; });
    var nodeEnter = node.enter()
        .append("circle")
        .attr("r", 8);
    nodeEnter.append("text")
        .attr("dx", -40)
        .attr("dy", 55)
        .text(function (d) { return d.id });
    node.exit().remove();

    force.start(); 
 }

节点正常，链接正常，但文字不可见！ 在这种情况下，如何正确附加文本节点？

Answer 1

您将文本节点附加到圆形节点，这是无效的SVG。相反，你应该做类似的事情：

var nodeEnter = node.enter()
  .append('g')
  .style("transform", "translate(...)")// Here you'll probably want to translate the group)

然后将圆圈和文本嵌套在组中：

nodeEnter
  .append('circle')
  .attr("r", 8);

nodeEnter.append("text")
  .attr("dx", -40)
  .attr("dy", 55)
  .text(function (d) { return d.id });

Answer 2

感谢您的回答。我测试了组元素

node = node.data(force.nodes(), function (d) { return d.id; });

var NodeEnter = node.enter()
.append("g");

NodeEnter.append("circle")
              .attr("r", 8);

不幸的是，我只看到屏幕一角的一个圆圈。为4个节点生成的svg是

<svg height="500" width="960">
<line>
...
y1="326.81906005822043" x1="454.86800328354803" 
... </line>
<g cy="326.81906005822043" cx="454.86800328354803">
<circle r="8"></circle>
</g>
...
</svg></div>

此外，“g”元素在链接（节点）上处于OK位置。 Cirle是元素内部。然而，我在屏幕的角落里看到元素

将文本附加到节点

2 个答案: