將節點追加到節點

Iam使用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(); 
}

節點都OK，鏈接都OK，但文字是不可見的！ 如何在這種情況下正確追加文本節點？

來源

2013-05-22 user2408220

爲什麼你使用 - 在DX ... ?? –

在[SVG - 文本元素]（http://www.w3.org/TR/SVG/text.html#TextElement）中瞭解屬性，但在此之前，我猜你應該在強制佈局停止後向節點添加文本互動。 – pravin

您正在將文本節點附加到圓形節點，該節點不是有效的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-22 15:17:38 meetamit

謝謝您的回答。我測試了組元素

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」要素是在鏈路（節點）上行位置。 Cirle是內部元素。然而，我看到屏幕上的角落中的元素

來源

2013-05-22 17:00:58 user2408220

將節點追加到節點

回答

相關問題