Javascript 试图通过嵌套在g元素中来显示圆圈和文本，失败。怎么了？

我想为每个节点显示一个

和

。我的代码如下所示，添加了下面答案中的建议代码。请注意不同之处

var width = 960,
    height = 500;

var color = d3.scale.category10();

var nodes = [], 
    links = [];

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .charge(-250)
    .linkDistance(25)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node")
    .data(force.nodes(), function(d) { return d.id;}),
    link = svg.selectAll(".link");

var text=svg.selectAll("text") //simply add text to svg
    .data(force.nodes())
    .enter()
    .append("text")
       .attr("class", "nodeText")
    .attr("font-family", "sans-serif")
            .attr("font-size", "10px")
            .attr("fill", "red");

function start() {
    link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
    link.enter().insert("line", ".node")
        .attr("class", function(d) { return "link " + d.edgeType; })
        .attr("id", function(d) { return d.source.id + "-" + d.target.id; });
    link.exit().remove();

v1:

存在并显示，不存在

或

存在

    var g = node.enter().append("g");
    g.append("circle")
        .attr("class", function(d) { return "node " + d.id; })
        .attr("id", function(d) { return d.id; })
        .attr("r", 8)
    .on("click", nodeClick);
    g.append("text")
        .text(function(d) {return d.id; });

/v1 v2:

s和

s存在并显示<代码>s存在于

s中，但不显示

    node = node.data(force.nodes(), function(d) { return d.id;});
    node.enter()
        .append("circle")
            .attr("class", function(d) { return "node " + d.id; })
            .attr("id", function(d) { return d.id; })
            .attr("r", 8)
        .on("click", nodeClick);
        node.append("text")
            .text(function(d) {return d.id; });

/v2

---

只需在js中添加如下文本元素

var text=svg.selectAll("text") //simply add text to svg
    .data(Your_nodes_array)
    .enter()
    .append("text")
       .attr("class", "nodeText")
    .attr("font-family", "sans-serif")
            .attr("font-size", "10px")
            .attr("fill", "red");

你可以这样做：

text.attr("dx", function(d) { return d.x+5;}) //to keep it away from node
  .attr("dy", function(d) { return d.y+5; })
  .text(function(d){return d.id});

这将解决循环和文本问题，因为这一次我们直接添加文本，这很有帮助，因为

元素现在在

中存在。但是，它们仍然没有显示出来。我更新了Q。

text.attr("dx", function(d) { return d.x+5;}) //to keep it away from node
  .attr("dy", function(d) { return d.y+5; })
  .text(function(d){return d.id});