score:55

*Accepted answer*

You are adding a text element inside a circle, that won't work. You can add groups under the svg element and then append the circle and a text in each group:

```
// Create the groups under svg
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
// Add one circle in each group
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
// Append the labels to each group
var labels = gnodes.append("text")
.text(function(d) { return d.name; });
force.on("tick", function() {
// Update the links
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; });
// Translate the groups
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
```

A fork of your fiddle with this strategy is here

Source: stackoverflow.com

#### Related Query

- Add text label to d3 node in Force directed Graph and resize on hover
- How to use hover and add text over node in d3 force simulation
- unable to add label to node on force directed graph
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Add text label to d3 node in Force layout
- How to add text in the center of node in force directed graph?
- Both single and double click on a node in d3 force directed graph
- D3 force directed graph node - text is being duplicated when expading
- Highlight a node and its neighbour node in force directed graph
- D3.js Donut Chart change node colors and add text label to middle
- How can I append text to and render that text from a line in a force directed graph in D3.js?
- styling node label not working in d3 force directed graph
- force directed graph - define the color of a node, if the node is source and target at the same time
- Vertically center a label consisting of multiple lines over a node in D3 force directed graph
- how to display the node attributes like person's name photo and address in a force directed graph
- How can I add text to edges in a force directed graph d3?
- How to add text to a force directed graph in D3.js
- Highlight selected node, its links, and its children in a D3 force directed graph
- Add text/label onto links in D3 force directed graph
- Is there a tap and double tap event in d3.js force directed graph
- D3 highlight selected node, and its links to parent and ancestors in a force directed graph
- Labels / text on the nodes of a D3 force directed graph
- d3js force directed - On hover to node, highlight/colourup linked nodes and links?
- How to have a text label on links in d3 force directed graphs
- Prevent node overlap in force directed graph
- Zooming and brushing in d3 force directed graph
- Adding label to the links in D3 force directed graph
- How to calculate in-degree, out-degree and weigted degree for force directed graph (d3.js)?
- How to add a dynamic legend to a D3 force directed graph in Apex?
- Freezing force directed network graph and make draggable in D3

#### More Query from same tag

- D3.js tree layout - Want to get count of descendant
- Appending multiple non-nested elements for each data member with D3.js
- D3JS: value filled only in first entry in geojson map. Others are null/undefined
- Standard/best color schema for D3.js
- D3: Resize bar chart according to window width
- x coordinate value after drag and drop event
- conditionally fill area between two lines in d3
- Read json children nodes with d3
- Representing the most recently clicked D3 node in a text field
- d3.js: mix projected and unprojected geodata
- How can I efficiently convert data from string to int within a d3 method chain?
- NVD3 redraw chart on load 'show'
- How to add delay on animation by calculating `index` value in d3.js?
- Applying gravity to a bounded d3.js force layout
- d3.js: show only part of data on xAxis
- Follow up: drawing-sequence-logos-in-d3 using images
- Is it better practice to use array of JSON objects or separate arrays in D3.js?
- Remove Path Fills Completely in D3
- Update a d3 barcharts on a "bounds_changed" google map event
- what scale to use for representing years only on x axis in d3 js
- The axis label at x=0 does not show up
- Is it possible to host an arbitrary d3 graph on plotly?
- How do I make an exponential growing chart line on D3.js
- Strange Gridline Behavior
- D3 area chart not rendering end to end
- How to change the icon of a pictogram?
- Change title dynamically in ndv3 pie chart
- Using json in d3
- d3 update circles on line when button clicked
- mpld3 using d3v3 and d3v4 on the same html page