Add text label to d3 node in Force directed Graph and resize on hover

by

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

More Related Contents:

  1. Label outside arc (Pie chart) d3.js
  2. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  3. Add text label to d3 node in Force layout
  4. Display an arrow head in the middle of D3 force layout link
  5. Scaling d3 v4 map to fit SVG (or at all)
  6. Highlight selected node, its links, and its children in a D3 force directed graph
  7. Replacing d3.transform in D3 v4
  8. How do I include newlines in labels in D3 charts?
  9. How can d3.transform be used in d3 v4?
  10. Updating SVG Element Z-Index With D3
  11. D3 Appending Text to a SVG Rectangle
  12. d3 add text to circle
  13. In d3, how to get the interpolated line data from a SVG line?
  14. Creating and appending detached elements with d3.create
  15. D3js take data from an array instead of a file
  16. Where is d3.svg.diagonal()?
  17. D3 fill shape with image using pattern
  18. D3 – how to deal with JSON data structures?
  19. Setting rounded corners for svg:image
  20. Circles in Map Displayed Incorrect Location in D3 V4
  21. Is there a way to zoom into a D3 force layout graph?
  22. Align Marker on node edges D3 Force Layout
  23. svg / d3.js rounded corners on one side of a rectangle
  24. Add text/label onto links in D3 force directed graph
  25. Add names of the states to a map in d3.js
  26. Adding new nodes to Force-directed layout
  27. How do I return y coordinate of a path in d3.js?
  28. Calculate SVG Path Centroid with D3.js
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment