D3v4: missing text in circle for force directed graph [duplicate] - d3.js

Question

This question already has an answer here:
Add text label to d3 node in Force layout
(1 answer)
Closed 5 years ago.
I am working on a simple visualisation with d3 to draw a force directed graph. I developed from the code at https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048 and I have also added a marker. However, I am struggling to draw a text under each node. The code is as follows:
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));
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("circle")
.data(nodes)
.enter()
.append("g")
.attr("class", "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));
node.append("title")
.text(function(d) { return d.id; });
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return 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;
}
The output returns the text, however, it is not displayed. Any thoughts on what can I be doing wrong?
Thanks a lot!

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>