d3.on event firing prior to mouseover event

Question

d3.on event firing prior to mouseover event

This page showcases a dynamic d3 bar chart. On line 162, we have an interesting event listener that logs a message when the user hovers over a bar on the chart. However, the log is displayed as soon as the page loads.

You can see the running code in action here:

If you are interested in delving into the full code, it's available on GitHub: https://github.com/shanegibney/d3Mouseover

The code includes HTML and JavaScript snippets for creating an interactive visual representation based on sample data showcasing different swimming sessions.

Although efforts were made to bind the hover effect only to specific elements related to the chart bars, there seem to be challenges with integrating brushX() and zoom functionalities seamlessly within the context.

javascript d3.js onmouseover

Answer 1

Answer №1

When you perform the following action:

.on("mouseover", console.log("I am on it"))

You are actually passing the output of the console.log function to the callback. Instead, what you should be passing is the function reference itself:

.on("mouseover", function(){
    console.log("I am on it")
})

Take a look at this example (but do not hover over the circle!):

var circle = d3.select("circle");
circle.on("mouseover", console.log("I'm on it!"));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle cx="50" cy="50" r="15" fill="teal"></circle>
</svg>

Now, let's rewrite the same code using the reference to console.log:

var circle = d3.select("circle");
circle.on("mouseover", () => console.log("I'm on it!"));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle cx="50" cy="50" r="15" fill="teal"></circle>
</svg>

Answer 2

When you perform the following action:

.on("mouseover", console.log("I am on it"))

You are actually passing the output of the console.log function to the callback. Instead, what you should be passing is the function reference itself:

.on("mouseover", function(){
    console.log("I am on it")
})

Take a look at this example (but do not hover over the circle!):

var circle = d3.select("circle");
circle.on("mouseover", console.log("I'm on it!"));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle cx="50" cy="50" r="15" fill="teal"></circle>
</svg>

Now, let's rewrite the same code using the reference to console.log:

var circle = d3.select("circle");
circle.on("mouseover", () => console.log("I'm on it!"));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle cx="50" cy="50" r="15" fill="teal"></circle>
</svg>

Answer 3

Answer №2

The problem arises when the function is being called at the same time as it is being declared:

.on("mouseover", console.log("I am currently on it")) //function call

A better practice would be to write it like this:

.on("mouseover", console.log) //function reference
.on("mouseover", function(d) { console.log("I am currently on it") }) //function reference

Answer 4

The problem arises when the function is being called at the same time as it is being declared:

.on("mouseover", console.log("I am currently on it")) //function call

A better practice would be to write it like this:

.on("mouseover", console.log) //function reference
.on("mouseover", function(d) { console.log("I am currently on it") }) //function reference

d3.on event firing prior to mouseover event

Answer №1

Answer №2

Similar questions

Update the contents of a div element with JavaScript and PHP combo

Tips on dividing the information in AngularJS

Accessing AngularJS variable scope outside of a function

Personalize your message in a JavaScript alert using Bootstrap notifications

Error: The function .default.auth.signout is not recognized in the REACT and Firebase environment

"Enhance Your Website with jQuery: Organized Lists with Fixed Length, Connected,

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

Learning how to effectively incorporate two matSuffix mat-icons into an input field

What could be causing a momentary 404 error when I click on a next.js `Link` that connects to an API endpoint before redirecting to the intended page?

Is there a way to utilize a variable as a key within an object?

How to use jQuery to locate and update the final parameter of a URL

What is the best way to create a TypeScript function similar to a 'map' in React?

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

Creating a comparison display using ng-repeat

Loading page with asynchronous JavaScript requests

Using Switch Case and If Statements in Javascript and Jquery

Monitor checkbox status to trigger confirmation dialog

Snippets of the webpage peeking through before the Fakeloader takes over

How can I pass function arguments dynamically to a nested function in Node.js?

JavaScript incorrectly constructs date strings