D3v4: missing text in circle for force directed graph [duplicate]

Answer 1

Right now, node is an "enter" selection for the circles, and you cannot append text to circles.

Solution: break the node selection, and change the ticked function accordingly:

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("gregorMendel")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

var circles = node.append("circle")
    .attr("r", 5)
    .style("fill", "lightgray")
    .style("stroke", "black")
    .style("stroke-width", "1px")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var titles = node.append("title")
    .text(function(d) {
        return d.id;
    });

var text = node.append("text")
    .style("text-anchor", "middle")
    .attr("y", 15)
    .text(function(d) {
        return d.id
    });

Here is the demo:

var nodes_url = "https://api.myjson.com/bins/1dedy1";
var edges_url = "https://api.myjson.com/bins/74lzt";
var marker = d3.select("svg").append('defs')
  .append('marker')
  .attr("id", "Triangle")
  .attr("refX", 12)
  .attr("refY", 6)
  .attr("markerUnits", 'userSpaceOnUse')
  .attr("markerWidth", 12)
  .attr("markerHeight", 18)
  .attr("orient", 'auto')
  .append('path')
  .attr("d", 'M 0 0 12 6 0 12 3 6');

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

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

d3.queue()
  .defer(d3.json, nodes_url)
  .defer(d3.json, edges_url)
  .await(function(error, file1, file2) {
    createForceLayout(file1, file2);
  });

function createForceLayout(nodes, links) {

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .style("stroke", "black")
    .style("opacity", .5)
    .style("stroke-width", "2px");

  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("gregorMendel")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

  var circles = node.append("circle")
    .attr("r", 5)
    .style("fill", "lightgray")
    .style("stroke", "black")
    .style("stroke-width", "1px")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  var titles = node.append("title")
    .text(function(d) {
      return d.id;
    });

  var text = node.append("text")
    .style("text-anchor", "middle")
    .attr("y", 15)
    .text(function(d) {
      return d.id
    });

  d3.selectAll("line").attr("marker-end", "url(#Triangle)");

  simulation
    .nodes(nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(links);

  function ticked() {
    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;
      });

    node.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
  }
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

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

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

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