Add text label to d3 node in Force layout

by

Right now, you are appending the text elements to the circle elements, and that simply won’t work.

When you write…

var label = nodes.append("svg:text")

You’re appending the texts to the nodesselection. However, you have to keep in mind what nodes is:

var nodes = svg.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")

Thus, you are appending the texts to circles, and that doesn’t work. They show up when you inspect the page (as <circle><text></text></circle>), but nothing will actually show up in the SVG.

Solution: just change to: 

var label = svg.selectAll(null)
    .data(dataset.nodes)
    .enter()
    .append("text")
    .text(function (d) { return d.name; })
    .style("text-anchor", "middle")
    .style("fill", "#555")
    .style("font-family", "Arial")
    .style("font-size", 12);

Here is the fiddle: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/

More Related Contents:

  1. Add text label to d3 node in Force directed Graph and resize on hover
  2. Highlight selected node, its links, and its children in a D3 force directed graph
  3. Fix Node Position in D3 Force Directed Layout
  4. Label outside arc (Pie chart) d3.js
  5. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  6. Is there a way to zoom into a D3 force layout graph?
  7. Align Marker on node edges D3 Force Layout
  8. Adding new nodes to Force-directed layout
  9. Display an arrow head in the middle of D3 force layout link
  10. D3.js: Remove force.drag from a selection
  11. draw text in d3 arc javascript
  12. clicking a node in d3 from a button outside the svg
  13. variable scope in d3 javascript
  14. Scaling d3 v4 map to fit SVG (or at all)
  15. Replacing d3.transform in D3 v4
  16. Find html label associated with a given input
  17. How to extract text from PDF in JavaSript
  18. Webkit-based blurry/distorted text post-animation via translate3d
  19. Change label text using JavaScript
  20. D3.js Map with Albers Projection: How to rotate it?
  21. Generate (multilevel) flare.json data format from flat json
  22. Getting selected text position
  23. d3 js – loading json without a http get
  24. How to access plain text content retrieved via in JavaScript?
  25. How do I return y coordinate of a path in d3.js?
  26. Calculate SVG Path Centroid with D3.js
  27. Change and transition dataset in chord diagram with D3
  28. Using d3 to shade area between two lines
  29. D3: How do I set “click” event and “dbclick” event at the same time?
  30. How to get the total depth of an unknown JSON hierarchy?

Leave a Comment