Difficulty in displaying a set of information through JavaScript

Question

Difficulty in displaying a set of information through JavaScript

Greetings,

I have created a tooltip that can be found at this link: http://jsfiddle.net/QBDGB/83/. In this tooltip, I have defined two "functions" like so:

function mousemove1(d) {
    div
      .text("data 1: " + d.value + " at " + formatTime(new Date(d.time)))
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY) + "px");
}

function mousemove2(d) {
    div
      .text("data2: " + d.value + " at " + formatTime(new Date(d.time)))
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY) + "px");
}

However, I am encountering an issue where the tooltip only displays the value of "data2" when I move the cursor. I would like the tooltip to recognize both series of data and display their respective values when hovering over the two curves of the graph.

javascript

Answer 1

Answer №1

1. Each function populates the div with new data, with data2 overwriting data1. Take a look at this fiddle to address this issue. Pay attention to the json variable added at line 123.

2. Furthermore, your .svg images are overlapping. Currently, only svg2 data is displayed because it does not recognize that you are also interacting with svg1.

To verify this, when hovering over a green or dark green area, only data2 is shown. However, when hovering over a blue area, both data1 and data2 are visible (as demonstrated in the provided link).

Once you hover over a blue area, the svg1 data remains unchanged when navigating to a green area until another blue area is interacted with.

Answer 2

1. Each function populates the div with new data, with data2 overwriting data1. Take a look at this fiddle to address this issue. Pay attention to the json variable added at line 123.

2. Furthermore, your .svg images are overlapping. Currently, only svg2 data is displayed because it does not recognize that you are also interacting with svg1.

To verify this, when hovering over a green or dark green area, only data2 is shown. However, when hovering over a blue area, both data1 and data2 are visible (as demonstrated in the provided link).

Once you hover over a blue area, the svg1 data remains unchanged when navigating to a green area until another blue area is interacted with.

Answer 3

Answer №2

When you bind two handlers to the mousemove event, the last one will overwrite the previous one.

It might be a good idea to pass both parameters at the same time to any of the handlers.

Here is an example of how you can do that:

function mousemove1(d1, d2) {
div
  .text("data 1: " + d1.value + " at " + formatTime(new Date(d1.time)) +"  "+ "data 2: " + d2.value + " at " + formatTime(new Date(d2.time)))
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px");
}

If you only need to pass one datalist at a time, you can use a switch statement like this:

function mousemove(d, caseNum) {
    switch(caseNum) {
    case1: // do your work of first case
        break;
    case2:  // do your work of second case
       break;
    case3:  // do your work of third case
       break;
    }
}

In the second method, you will need to pass the caseNum parameter to indicate the case number.

Answer 4

When you bind two handlers to the mousemove event, the last one will overwrite the previous one.

It might be a good idea to pass both parameters at the same time to any of the handlers.

Here is an example of how you can do that:

function mousemove1(d1, d2) {
div
  .text("data 1: " + d1.value + " at " + formatTime(new Date(d1.time)) +"  "+ "data 2: " + d2.value + " at " + formatTime(new Date(d2.time)))
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px");
}

If you only need to pass one datalist at a time, you can use a switch statement like this:

function mousemove(d, caseNum) {
    switch(caseNum) {
    case1: // do your work of first case
        break;
    case2:  // do your work of second case
       break;
    case3:  // do your work of third case
       break;
    }
}

In the second method, you will need to pass the caseNum parameter to indicate the case number.

Difficulty in displaying a set of information through JavaScript

Answer №1

Answer №2

Similar questions

Upon refreshing the page, an inline script was not executed due to its violation of the Content Security Policy directive: "script-src 'self'"

Utilizing Local Storage in Vuex Store with Vue.js

Receiving encoded characters in the response

What is the best way to utilize Typescript when making queries to Firebase?

Prevent Float Filtering in AngularJS

Dynamically load the configuration for a JQuery plugin

A guide on integrating the MUI Timepicker with the newest 6 version using Formik

Generate JSON dynamically using a foreach loop

PapaParse is not properly recognizing the date format

Tips for creating Selenium code to verify the asterisk symbol

When using the map function, I am receiving an empty item instead of the intended item based on a condition

How can I merge these two Observables in Angular to create an array of objects?

Having difficulty positioning the Divider correctly among Grid items

Using PHP and JavaScript to enhance functionality around a hyperlink

Creating routes in Node.js after setting up middleware

Trigger a click event to alter the child div elements

What is the method for invoking an anonymous JavaScript object when its name is unknown?

Creating dynamic styles with Material-UI's useStyles

Determining special characters within a string using VueJS

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the