adding labels to d3 elements without nesting

Question

adding labels to d3 elements without nesting

I need help creating HTML with tooltips and tooltip text for each  tag. While I know this can be achieved using d3, I am currently using a CSS approach because it feels more familiar to me.

In an ideal scenario, the desired HTML output should resemble the following structure:

<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">Tooltip text</span>
</p>
<br>
<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">filler text</span>
</p>

To prevent the text inside the p tags from appearing on the same line, I have included a  . However, the issue arises when the   becomes nested within the span tags, resulting in an undesirable HTML structure as shown below.

<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">Tooltip text <br></span>
</p>
<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">filler text <br></span>
</p>

The current d3 code snippet is as follows:

Despite attempting to rearrange the .append("d3"), I have encountered challenges where it either disrupts the tooltip functionality or interferes with the visualization entirely.

div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })
  .style("font-size", function(d) {
     return scale(parseInt(d.score))  + "pt";
  })
  .append('span')
  .attr("class", "tooltiptext")
  .text("filler text")
  .append("br")

Your assistance in resolving this matter is greatly appreciated.

javascript html css d3.js

Answer 1

Answer №1

When using d3's .insert() method from either the v3 or v4+ selection APIs, keep in mind that it only inserts an element once, which may not be ideal for scenarios with more than two  elements. A workaround is to iterate through all  nodes and utilize JavaScript's native Element.insertBefore() method to achieve the desired outcome of inserting a   after each  element.

In this situation, skipping the call to insertBefore() for the first encountered  element and applying it subsequently to the rest can be effective.

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Loop through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Skip insertion for the first `<p>`
  if (i === 0)
    return;

  this.parentNode.insertBefore(document.createElement('br'), this);
});

Check out the proof-of-concept below:

var div = d3.select('div');
var myData = [{
  word: 'Lorem ipsum dolor sit amet'
}, {
  word: 'Consectetur adipiscing elit'
}, {
  word: 'Nam id sollicitudin magna'
}, {
  word: 'Pharetra rutrum nisl'
}];

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Iterate through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Do not insert if first `<p>` is encountered
  if (i === 0)
    return;
    
  this.parentNode.insertBefore(document.createElement('br'), this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div></div>

Answer 2

When using d3's .insert() method from either the v3 or v4+ selection APIs, keep in mind that it only inserts an element once, which may not be ideal for scenarios with more than two  elements. A workaround is to iterate through all  nodes and utilize JavaScript's native Element.insertBefore() method to achieve the desired outcome of inserting a   after each  element.

In this situation, skipping the call to insertBefore() for the first encountered  element and applying it subsequently to the rest can be effective.

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Loop through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Skip insertion for the first `<p>`
  if (i === 0)
    return;

  this.parentNode.insertBefore(document.createElement('br'), this);
});

Check out the proof-of-concept below:

var div = d3.select('div');
var myData = [{
  word: 'Lorem ipsum dolor sit amet'
}, {
  word: 'Consectetur adipiscing elit'
}, {
  word: 'Nam id sollicitudin magna'
}, {
  word: 'Pharetra rutrum nisl'
}];

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Iterate through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Do not insert if first `<p>` is encountered
  if (i === 0)
    return;
    
  this.parentNode.insertBefore(document.createElement('br'), this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div></div>

adding labels to d3 elements without nesting

Answer №1

Similar questions

Step-by-step guide on accessing values from a JavaScript object

.post method reveals parameter in URL upon submission

How can nextJS leverage async getInitialProps() method in combination with AWS S3?

Modifying arrays in ReactJS

Passing a JSON file name as an argument to a command line in Node.js

Make a POST request using AJAX to the current page and retrieve a value using the $_POST method

Error: Unable to access the 'classList' property of null in HTMLSpanElement.expand function

Leverage more information by clicking on the xAxis element - Highcharts.js

Keypress in JavaScript

Adjust the height of an element when the maximum height is set to none

Can Vue2-Google-Maps dynamically load API keys using props?

When attempting to access index.html, the Express Server responds with a "Page Not Found"

What specific portion of the code will be transformed into a virtual DOM?

Get rid of the margins on your Wordpress theme

Ways to identify faces of a 3D form obscured by other surfaces (undetectable from a specific viewpoint)

Using React components to create an anchor element for a popover display

Formik React struggling with error management and handling tasks accurately

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

Nuxt.js implemented with Auth using jwt refresh tokens

Two variations of identical descriptions within a single div container