0

我正在使用 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(); 
 }

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

4

2 回答 2

0

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

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”元素在链接（节点）上处于正常位置。圆是内部元素。然而我在屏幕的角落看到元素

于 2013-05-22T17:00:58.597 回答
0

您将一个文本节点附加到一个不是有效 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 });
于 2013-05-22T15:17:38.143 回答