将文字添加到圆圈

Question

我想使用d3.js在圆圈外添加文字，但只有文字没有添加，其他代码工作正常。如何在圈子中添加文字？

//create somewhere to put the force directed graph
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var radius = 15;

var nodes_data = [{
    "name": "Bacillus",
    "sex": "F"
  }, {
    "name": "Candida",
    "sex": "M"
  }, {
    "name": "Dorhea",
    "sex": "M"
  }, {
    "name": "Pichia",
    "sex": "F"
  },

]

//Sample links data 
//type: A for Ally, E for Enemy
var links_data = [{
    "source": "Candida",
    "target": "Bacillus",
    "type": "A"
  }, {
    "source": "Dorhea",
    "target": "Candida",
    "type": "E"
  }, {
    "source": "Bacillus",
    "target": "Dorhea",
    "type": "A"
  }, {
    "source": "Bacillus",
    "target": "Pichia",
    "type": "C"
  },


]
var linkElements = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(links)
  .enter().append("line")
  .attr("stroke-width", 1)
  .attr("stroke", "rgba(50, 50, 50, 0.2)")
var nodeElements = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("r", 18)
  .attr("fill", getNodeColor)
var textElements = svg.append("g")
  .attr("class", "texts")
  .selectAll("text")
  .data(nodes)
  .enter().append("text")
  .text(function(node) {
    return node.name
  })
  .attr("font-size", 20)
  .attr("dx", 15)
  .attr("dy", 4)
simulation.nodes(nodes).on('tick', () => {
  nodeElements
    .attr('cx', function(node) {
      return node.x
    })
    .attr('cy', function(node) {
      return node.y
    })
  textElements
    .attr('x', function(node) {
      return node.x
    })
    .attr('y', function(node) {
      return node.y
    })
  linkElements
    .attr('x1', function(link) {
      return link.source.x
    })
    .attr('y1', function(link) {
      return link.source.y
    })
    .attr('x2', function(link) {
      return link.target.x
    })
    .attr('y2', function(link) {
      return link.target.y
    })
})

//set up the simulation 
var simulation = d3.forceSimulation()
  //add nodes
  .nodes(nodes_data);




var link_force = d3.forceLink(links_data)
  .id(function(d) {
    return d.name;
  });

var charge_force = d3.forceManyBody()
  .strength(-2500);

var center_force = d3.forceCenter(width / 2, height / 2);

simulation
  .force("charge_force", charge_force)
  .force("center_force", center_force)
  .force("links", link_force);


//add tick instructions: 
simulation.on("tick", tickActions);

//draw lines for the links 
var link = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(links_data)
  .enter().append("line")
  .attr("stroke-width", 2)
  .style("stroke", linkColour);

//draw circles for the nodes 
var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(nodes_data)
  .enter()
  .append("circle")
  .attr("r", radius)
  .attr("fill", circleColour);

node.append("text")
  .attr("x", 12)
  .attr("dy", ".35em")
  .text(function(d) {
    return d.name;
  });
var drag_handler = d3.drag()
  .on("start", drag_start)
  .on("drag", drag_drag)
  .on("end", drag_end);

drag_handler(node)



/** Functions **/

//Function to choose what color circle we have
//Let's return blue for males and red for females
function circleColour(d) {
  if (d.sex == "M") {
    return "blue";
  } else {
    return "pink";
  }
}

//Function to choose the line colour and thickness 
//If the link type is "A" return green 
//If the link type is "E" return red 
function linkColour(d) {
  if (d.type == "A") {
    return "green";
  } else {
    return "red";
  }
}



//drag handler
//d is the node 
function drag_start(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function drag_drag(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}


function drag_end(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}


function tickActions() {
  //constrains the nodes to be within a box
  node
    .attr("cx", function(d) {
      return d.x = Math.max(radius, Math.min(width - radius, d.x));
    })
    .attr("cy", function(d) {
      return d.y = Math.max(radius, Math.min(height - radius, d.y));
    });

  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;
    });
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: black;
  stroke-width: 0px;
}

svg {
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="400"></svg>

上面的代码添加了圆圈之间的颜色和圆圈之间的链接，但我想在圆圈之外添加文字，但是当我应用代码添加文本时，它不添加text.how来解决这个问题？

添加文字的代码是：

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")`enter code here`
    .text(function(d) { return d.name; });
    var drag_handler = d3.drag()
        .on("start", drag_start)
        .on("drag", drag_drag)
        .on("end", drag_end);