D3 version 5 node labeling issue persists

Question

D3 version 5 node labeling issue persists

I've been attempting to include labels within my node, but for some reason it's not working as expected.

//creating circles for the nodes
var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes_data)
    .enter()
    .append("circle")
    .attr("r", radius)
    .attr("fill", circleColour);
node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name });

Upon inspecting the elements of the node, I can see that the text is indeed inside the node:

<circle r="15" fill="blue" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="421.4930863434973" cy="221.26393165638473"><text dx="12" dy=".35em">some name</text></circle>

Despite this, the text is not displaying in the chart. Can anyone offer assistance with this issue? Here is the link to the full plunkr:

javascript angularjs d3.js charts

Answer 1

Answer №1

In a circle by definition, you can only have animation elements and descriptive elements as content. Therefore, text cannot be placed inside a circle.

The solution is to include multiple g elements for each node, and within them, have circle and text elements.

var node = g.selectAll('.nodes')
  .data(nodes_data)
  .enter().append('g')
  .attr('class', 'nodes')

node.append('circle')
    .attr("r", radius)
    .attr("fill", circleColour)

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name });

Then in the tick function:

node.attr('transform', d => `translate(${d.x},${d.y})`);

Here is a working forked version of the code on Plunker.

Answer 2

In a circle by definition, you can only have animation elements and descriptive elements as content. Therefore, text cannot be placed inside a circle.

The solution is to include multiple g elements for each node, and within them, have circle and text elements.

var node = g.selectAll('.nodes')
  .data(nodes_data)
  .enter().append('g')
  .attr('class', 'nodes')

node.append('circle')
    .attr("r", radius)
    .attr("fill", circleColour)

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name });

Then in the tick function:

node.attr('transform', d => `translate(${d.x},${d.y})`);

Here is a working forked version of the code on Plunker.

D3 version 5 node labeling issue persists

Answer №1

Similar questions

The console log is not being displayed in my Redux reducer and it is returning an undefined

Is there a way to eliminate the default bootstrap stylings?

Managing cookies in PHP and JavaScript can present challenges due to variations in how different browsers

Attempting to output properties from an Express/Mongo API by utilizing a React.js frontend

Trouble getting the ng-hide animation to work on the md-button element

Order an array based on another array using the underscore library in Javascript

Convert string IDs from a JSON object to numerical IDs in JavaScript

Uploading files from a local directory to an API using node.js and multipart/form-data

What is the best way to ensure that the angularjs ngChange handler is triggered only after the user has finished typing

Can we find a different way to address this issue with a "functional programming" mindset that doesn't involve utilizing the `forEach` method?

Update a map marker on Google Maps by changing the MySQL coordinate

Transforming jQuery script into AngularJS

Filtering an array of objects in real-time

Creating a redirect button using React Material UI and React Router

QuickFit, the jQuery plugin, automatically adjusts the size of text that is too large

Transferring files to Amazon Web Services from Parse

Each branch of the data structure is meticulously separated using recursion

How can you turn consecutive if statements into asynchronous functions in JavaScript?

Creating unique reusable Angular components with dynamic attributes similar to React's props

What is the process for bundling a separate JavaScript file with Webpack5?