Transmitting the position of the cursor to a d3 graph

I am facing a challenge with my d3 chart where I need to send mouse coordinates from one chart to another.

While triggering the mouse event remotely on the target chart, everything works smoothly up until that point. However, I encounter an issue when trying to obtain the mouse coordinates in the code snippet below:

$chart.on('mousemove', function () {
     var mouse = d3.mouse(this);

The values for the mouse always return as NaN. This may be due to the mouse being over another container. Is there a workaround to retrieve these mouse coordinates within this context?

javascriptd3.jscharts

Answer №1

After brainstorming, the concept evolved into "how to initiate an event from one container to another."

  1. Container - Trigger

A custom jQuery function was created - jQuery proves effective as it simplifies the process of selecting an HTML element.

$.fn.triggerSVGEvent = function(eventName, extraParameter) {
           var event = document.createEvent('SVGEvents');
           event.initEvent(eventName, true, true);
           event.extraParameter = extraParameter;  //this can be extended as needed
           this[0].dispatchEvent(event);
           return $(this);
         };

To trigger the event from the desired location,

var $el = $('#chart-two');
$el.triggerSVGEvent('mousemove', mouse); 
//Sending mouse coordinates was crucial for me.

  1. Container - Receiver

    var $el = $('#chart-two'); $el.on('mousemove', function() { var mouse = d3.event.extraParameter; }

A special shoutout to @thatOneGuy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your website with jQuery's animate() feature for dynamic

My current implementation of jQuery's animate function looks like this: var css1 = { display: "block", marginTop: 20 }; var direction = "marginTop"; $(element).animate(css1, 150, 'swing'); I've noticed the marginTop ...

javascriptjquerystringvariables

Unlock the potential of displaying similar object values side by side in JavaScript, React, and ES6 - here's how!

Currently, I am dealing with an object called segregatedData which is being passed as props. Among its several properties, we are interested in segregatedData.type1. This particular property is essentially an array of strings similar to this: ['water& ...

javascriptarraysreactjssortingforeach

What is the mechanism for invoking functions defined with the arrow syntax in Angular?

Referencing this code snippet from the tutorial at https://angular.io/tutorial/toh-pt4, specifically within the hero.component.ts file: getHeroes(): void { this.heroService.getHeroes() .subscribe(heroes => this.heroes = heroes); } After analyz ...

javascriptangular

Generate a dynamic form that automatically populates different input fields based on JSON data

I am trying to dynamically auto populate a form with various input types such as select boxes and text areas. I have successfully implemented this for input boxes, see example below: function autofill(){ var data = [{visible_retail: "0", brand: ...

javascripthtmljqueryajax

What is the best way to extract a message as an object from a JSON data in discord.js?

Currently in the process of developing a discord bot with an election feature for my server's moderator. All the necessary election data is being saved in an external JSON file to ensure that if the bot crashes during an election, it can seamlessly re ...

javascriptjsonobjectnpmdiscord.js

Error: HTMLButtonElement on notes-taking website unable to read property 'push' of null

I'm encountering an issue with this code that is resulting in an error message: Uncaught TypeError: Cannot read property 'push' of null at HTMLButtonElement. (app.js:15) console.log("Welcome to Notes Taking Website"); // To sto ...

javascriptarraysdomlocal-storage

HTML code for a grid view that allows users to expand and collapse rows in a

I'm looking for a gridview with 'n' rows, each containing 4 columns/items to be displayed. My goal is to accomplish this using an Html/Javascript/Vuejs template exclusively. The desired view should look like this: https://i.sstatic.net/kSx7 ...

javascripthtmlcssvue.jsvue-component

Issue occurs when trying to access the 'set' property of an undefined variable, leading to an error message stating "Cannot read property 'set' of undefined" while using 'this

I'm facing an issue while setting up basic cookies for my Vue project. When I try to set a cookie, I encounter the following error. My package.json file indicates that I am using vue-cookies version ^1.7.4. The error message occurs when I click the bu ...

javascriptvue.jsnpmvuejs3vue-cookies

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

javascriptcssangularng-class

Automate brush control and transmit pertinent data through coding

Extending on the query from yesterday's thread, I am working towards implementing multiple brushes. While my current brute force method is functional, I require additional functionality to programmatically manage each of these newly created brushes. ...

javascriptd3.js

Having trouble displaying Vue Toast messages?

I have been trying to incorporate a toast message into my code, but unfortunately, the message does not appear and there are no errors in the console. The code functions properly and the invitation is sent successfully. I have used similar code in other fi ...

javascriptvue.jstoast

Occasion that fires prior to the DOM being fully loaded

Is there an event in my Firefox extension that triggers before DOMContentLoaded and allows me to insert HTML while the document is still available? ...

javascriptfirefoxfirefox-addonxul

Expanding a Node.js class to incorporate additional static class elements

I have a query where I believe that extending a class might be the solution, but I am not entirely sure. Here is the scenario... There is a class defined as follows: class Field { apiName; /** * Creates an instance of Field with the given par ...

javascriptnode.js

How can I create a password field for a prompt dialog using AngularJS Material?

Currently, I am working with the AngularJS Material library and I am facing an issue with a prompt dialog that I need to display for users to enter a password. The problem is that even though the dialog functions correctly, the text field does not have the ...

javascriptangularjs

How can I obtain the model values for all cars in the primary object?

const vehicles={ vehicle1:{ brand:"Suzuki", model:565, price:1200 }, vehicle2:{ brand:"Hyundai", model:567, price:1300 }, vehicle3:{ brand:"Toyota", model ...

javascriptjsontypescriptobject

How can I access dynamically created input elements without using $refs, such as getting focus?

Is there a way to handle dynamically created inputs for editing purposes without using jQuery or vanilla JS all the time? Each input element has its own ID and is displayed through v-if when editing is triggered. However, Vue does not recognize them in r ...

javascriptvue.js

The Axios onDownloadProgress function on the GET method is only triggered one time, and the setTimeout within the callback is never executed

I'm currently working on displaying a progress bar while fetching data from the backend API. However, I've encountered a couple of issues that I'm struggling to resolve. Firstly, the progress bar jumps from 0 to 100 without showing any actua ...

javascriptreactjsajaxaxiosprogress-bar

Accelerating the Jquery/Json query速

Working with javascript/jquery for the first time has been quite a learning experience. I had to follow each step carefully, but I finally managed to get it working exactly how I wanted. My JSON file contains data formatted like this: [ { "Procedure ...

javascriptjqueryjson

Leveraging GSAP and Vue by utilizing props to dynamically calculate a maxWidth

I am working on animating buttons in my application using GSAP. The idea is that when a user clicks the button, it should animate the maxWidth of the button. I want this to be dynamic by adding a percentage of the max width set using props. Is it possibl ...

javascriptvue.jsnuxt.jsgsap

Looking for ways to detect memory leaks in your JavaScript application using Selenium?

While utilizing Java and Selenium for automated testing of a JavaScript web application, the issue of memory leaks has arisen. I am interested in ways to effectively test for them. Is there a simple method to obtain memory usage and other profiling data fo ...

javascriptseleniummemory-leaksselenium-chromedriver