Issue with a tooltip following my cursor in an svg

Question

I created a graph of the S&P 500 in a React App using d3 and svgs. I wanted to style the graph by adding alternate shading on the graph to further visually highlight the start and end of each year. I created user interactivity by creating mouseMove and mouseLeave functionality that provides the graph value when the user hovers over different points in the graph. Almost creating a crosshair look to show where you are on the graph. The only problem is that when I add the alternate shading, it interferes with the crosshairs rendering on my mouse position, and snaps back to the origin point of my graph.The crosshairs work fine when the cursor is not in the shaded areas, but snaps to the (0,0) point in the graph when the cursor is hovering over a shaded portion of the graph. I suspect the issue has to do with the transform translate values of the alternate shaded rectangles, but I tried a few ways to render these rectangles (using different transform coordinates to start the drawing of the rectangles) and the crosshairs still snap to the origin when I hover over a shaded area. It might have to do with how I created the functions for the mouseMove and mouseLeave functions, but I'm running out of ideas. How can I still make the crosshairs work when hovering over the shaded areas of the graph?

Here is my code:

// You need to figure out why there is a big black box in front of your graph when you tried to add a tooltip

import * as d3 from "d3";
import { useEffect, useRef, useState } from "react";
//import styles from './AreaGraph.module.css';
import useMeasure from "react-use-measure";
import { format, startOfYear, startOfMonth, startOfQuarter, endOfYear, endOfMonth, endOfQuarter, eachYearOfInterval, eachMonthOfInterval, eachQuarterOfInterval, isSameYear, isSameMonth, isSameQuarter } from "date-fns";
import { motion } from "framer-motion";

const AreaGraph2 = ({ height, width, dates, values, data }) => {
    // const tooltipRef = useRef(null);
    //let [reference, bounds] = useMeasure();
    const tooltipRef = useRef();
    const margin = { top: 20, right: 20, bottom: 15, left: 35 };
    const graphWidth = 600 - margin.left - margin.right;
    const graphHeight = 600 - margin.top - margin.bottom;
    let previousData = [];

    const [xPos, setXPos] = useState(0);
    const [yPos, setYPos] = useState(0);
    const [prevD, setPrevD] = useState([]);
    const [tooltipVisible, setTooltipVisible] = useState(false);
    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });


    // const width= graphWidth + margin.left + margin.right;
    // const height= graphHeight + margin.top + margin.bottom;

    // console.log(data);
    // const data2 = Object.entries(data).map(([key, value]) => [key, value]);
    // console.log(`data2: ${data2}`);

    // Check if data is valid and not empty
    if (!Array.isArray(data) || data.length === 0) {
        return No data available;
    }

    // Check if data points are valid numbers
    const isValidData = data.every(([x, y]) => Object.prototype.toString.call(x) === '[object Date]' && typeof y === 'number');
    if (!isValidData) {
        return Data contains invalid values;
    }

    // // Check if data points are valid numbers
    // const isValidData = data.every(([x, y]) => typeof x === 'number'Object.prototype.toString.call(date) && typeof y === 'number');
    // if (!isValidData) {
    //     return Data contains invalid values;
    // }

    // console.log(typeof(data[0][1]));
    // console.log(data[0][0]);
    // console.log(data[0][0] instanceof Date);
    // console.log(data[data.length - 1][0])
    // console.log(data[data.length - 1][0] instanceof Date)
    // const data3 = data2.map(([_, value]) => [value[0], value[1]]);
    // console.log(`data3: ${data3}`);

    let startYear = startOfYear(data.at(0)[0]); // Takes first datetime data point in the ascending-order dataset and sets the datetime data point to the start of that year
    let endYear = endOfYear(data.at(-1)[0]); //  Takes the last datetime data point in the ascending-order dataset and sets the datetime data point to the end of that year
    let years = eachYearOfInterval({ start: startYear, end: endYear}); // Creates an array of one datetime object from each year that starts on 01 Jan 00:00:00
    // console.log(years);
    let startMonth = startOfMonth(data.at(0)[0]); // Takes first datetime data point in the ascending-order dataset and sets the datetime data point to the start of that year
    let endMonth = endOfMonth(data.at(-1)[0]); //  Takes the last datetime data point in the ascending-order dataset and sets the datetime data point to the end of that year
    let months = eachMonthOfInterval({ start: startMonth, end: endMonth}); // Creates an array of one datetime object from each year that starts on 01 Jan 00:00:00
    // console.log(months);

    let xScale = d3.scaleTime()
            .domain([startYear, endYear]) // Passed in an array of the minimum and maximum dates in the passed in data. Note that the d3.domain() method requires an Array of 2 values - .domain([start, end])
            //data[0][0], data[data.length - 1][0]
            //d3.extent(data.map((d) => d[0]))
            .range([margin.left, width-margin.right]);
            
    let yScale = d3.scaleLinear()
            .domain(d3.extent(data.map((d) => d[1])))
            .range([height-margin.bottom, margin.top]);

    let line = d3.line()
            .x((d) => xScale(d[0])) //Returns the x value of each point in the data, and wraps it in the xScale to scale the data across the graph. In this dataset, the first value in each array of value pairs (aka the 'x' in the [x, y] array) is the datetime object.
            .y((d)=> yScale(d[1])); //Returns the y value of each point in the data, and wraps it in the yScale to scale the data uo and down the graph. In this dataset, the second value in each array of value pairs (aka the 'y' in the [x, y] array) is the S&P500 points value in a floating point number form.

    let result = line(data); // Takes the data passed into the component via a prop, and passes it through the d3.line() function to create the drawing line for the d attribute in the  element that will be embedded in the 
                    Date: {format(xScale.invert(xPos), 'MM/dd/yyyy')}, Value: {yScale.invert(yPos)}
                
            )}
        
    );
};


export default AreaGraph2;

Here is the link to the repository:

https://github.com/drcasas2/sp500dataviz.git

And here is a link to the live site if you want to see what the problem is. Hover over any of the blue shaded sections and the crosshair snaps back to (0, 0):

https://drcasas2.github.io/sp500dataviz/

If you need any more context, please let me know, since I'm EAGER to solve this problem.

Thanks!

Under {/* X-Axis Shading */}, I started with rectangle svg elements, and tried altering the origin from which the rectangles are rendered by trying transform = {translate(${xScale(date)},${0}) with a positive height value or transform = {translate(${xScale(date)},${height - 5}) with a negative height value (but the rectangles wouldn't render with a negative height value, so I switched to using a path to define the rectangles. None of these options have worked for me so far.

Issue with a tooltip following my cursor in an svg

Answers (0)

Related Questions