d3 forced layout graph label and text on vertex and edges

Question

I am trying to create forced directed graph using d3 v4 .

I am able to create vertex and edges ,but not able to add name/text inside vertex shape .

For Edges text should be above line in its half length.

The below code is adding text but not in correct position

node.append("text").
attr("dx", 6).attr("dy", ".35em")
.style("font-size",10).text(function(d) { return d.name });

JSFIDDLE

Answer 1

now you will be able

explain

first you create a group of node and link

1. node is group to hold the circle
2. link is group to hold the line connection

---

you create variable node append the data by

node = node.data(nodes, function(d) { return d.id;});
//var node pointing to group cos still node = g.append("g")

than you update variable node to append circle

node = node.enter().append("circle")
//var node pointing to circle on group

if you make text by

node.append("text").
attr("dx", 6).attr("dy", ".35em")
.style("font-size",10).text(function(d) { return d.name });

inspect the HTML

it will append on node>circle>text and this is wrong
the right one should be node>text

so create text on node group not in circle

before node variable pointing to circle create variable text to append on group

 uu = node.enter().append("text")

than update the x and y position like you update cx and cy of circle on

function ticked() {//update x and y of uu variable}

 var createD3 = function(){ var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), color = d3.scaleOrdinal(d3.schemeCategory10); var a = {id: "a",name:"y"}, b = {id: "b",name:"x"}, c = {id: "c",name:"z"}, nodes = [a, b, c], links = [{source: a, target: b},{source: b, target: c},{source: c, target: a}]; var simulation = d3.forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-1000)) .force("link", d3.forceLink(links).distance(200)) .force("x", d3.forceX()) .force("y", d3.forceY()) .alphaTarget(1) .on("tick", ticked); var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"), link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"), node = g.append("g").attr("stroke-width", 1.5).selectAll(".node"); restart(); function restart() { // Apply the general update pattern to the nodes. node = node.data(nodes, function(d) { return d.id;}); node.exit().remove(); uu = node.enter().append("text").text(function(d) { return d.name }).attr("fill",'blue').attr('text-anchor','middle').style('font-size',24) node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node); //var labels = node // Apply the general update pattern to the links. link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; }); link.exit().remove(); link = link.enter().append("line").merge(link); // Update and restart the simulation. simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart(); } function ticked() { node.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); uu.attr("x", function(d,i) { if(i==0){return dx-80;} if(i==1){return d.x+10;} if(i==2){return d.x+80;} }) .attr("y", function(d,i) { if(i==0){return d.y+40;} if(i==1){return dy-80;} if(i==2){return d.y+80;} }) 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; }); } }; createD3(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script> <svg width="500" height="500"></svg>