Use of .on("mouseover", ...) in d3.js

Question

I'm getting introduced to javascript and I'm trying to use .on("mouseovert", ...) in order to get the x-value of my graph when the cursor is upon the graph.

My code look like this:

// do something as mouseover the graph
svg.select("svg")
    .on("mouseover", alert("mouse on graph"));

The result is: an alert appears when I open the html file (and loading my js script), but nothing happen as is hover the graph.

Everything else in the script works fine.

Do you know why?

Thank you very much for the time you take!

Here is the full script:

function draw_co2(url) {
    d3.select("svg").remove() //remove the old graph
    // set the dimensions and margins of the graph
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    // parse the date / time
    var parseTime = d3.timeParse("%Y-%m-%d");

    // Get the data
    d3.json(url, function (error, data) {
        if (error)
            throw ('There was an error while getting geoData: ' + error);
        data.forEach(function (d) {
            d.Date = parseTime(d.Date);
            d.Trend = +d.Trend;
        });

        // set the ranges // Scale the range of the data
        var x = d3.scaleTime().domain([new Date("1960"), new Date("2015")]).range([0, width]);
        var y = d3.scaleLinear()
            .domain([d3.min(data, function (d) {
                        return d.Trend;
                    }) - 1 / 100 * d3.min(data, function (d) {
                        return d.Trend;
                    }), d3.max(data, function (d) {
                        return d.Trend;
                    }) + 1 / 100 * d3.min(data, function (d) {
                        return d.Trend;
                    })])
            .range([height, 0]);

        // define the line
        var valueline = d3.line()
            .x(function (d) {
                return x(d.Date);
            })
            .y(function (d) {
                return y(d.Trend);
            });

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#graph_draw").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        //Y Axis label
        svg.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Carbon dioxide (ppm)");

        // Add the valueline path.
        svg.append("path")
        .data([data])
        .style("opacity", 0)
        .transition()
        .duration(1000)
        .style("opacity", 1)
        .attr("class", "line")
        .attr("d", valueline);

        // Add the X Axis
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
        .call(d3.axisLeft(y));

        // gridlines in x axis function
        function make_x_gridlines() {
            return d3.axisBottom(x)
            .ticks(10);
        };

        // add the X gridlines
        svg.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_gridlines()
            .tickSize(-height)
            .tickFormat(""));

        // do something as mouseover the graph
        svg.select("svg")
        .on("mouseover", alert("mouse on graph"));
    })
}

Put that in a function. Use `svg.on("mouseover", function(){alert("mouse on graph")});` — Aditya, May 11 '18 at 11:30
I tried it but it doesn't work. Now the alert doesn't even come when I load the html file. I tried to replace the `svg.select("svg")` by `svg.select("body")` to see if the problem wouldn't come from the selection, but the result is the same. — Wakhaus, May 11 '18 at 11:49
Try `d3.select('svg').on("mouseover",function(){alert("mouse on graph")})` — Aditya, May 11 '18 at 11:55
It kind of works. An alert appears when I hover the graph. But if I replace the alert by: `// do something as mouseover the graph var count=0; d3.select("svg").on("mouseover",function(){ count += 1; console.log(count);});` the result is that a number appears in the console, but only periodically, like every second instead of every centisecond. Maybe there is elements that are hovering the graph? (sorry, I don't know how to put code in block when answering) — Wakhaus, May 11 '18 at 12:09

score 0 · Answer 1 · answered May 11 '18 at 11:33

0

Use mouser over as an inline function

svg.select("svg")
.on("mouseover", function () {
    alert("mouse on graph")
});

answered May 11 '18 at 11:33

Aravind Cheekkallur

3,157
6
27
41

Use of .on("mouseover", ...) in d3.js

1 Answers1