d3.event in getScreenBBox() function

[zpfdev]

I am running into an d3.event is undefined is undefined while trying to create a tooltip. I suspect that it may has to do with the d3.event in getScreenBBox(). because in d3v6, it is replaced with event.target.

This is how I select my svg and calls the tip function

var svg = d3.select("#mapDiv")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background-color", "white")
    .style("border", "solid 1px black")
    .call(d3.zoom()
        .on("zoom", function (event) {
            svg.attr("transform", event.transform);
        })
        .scaleExtent([1, 1])
    )
    .append("g");

const tip = d3.tip().attr('class', 'd3-tip').html(function (event, d) {
    console.log(event.target.id);
    return event.target.id;
});

svg.call(tip);

This is how I draw my map:

d3.json(path).then(function (json) {
    var projection = d3.geoMercator();
    var features = json.features;

    var fixed = features.map(function (feature) {
        return turf.rewind(feature, { reverse: true });
    })

    var geoPath = d3.geoPath().projection(projection);

    projection.fitSize([width, height], { "type": "FeatureCollection", "features": fixed })

    svg.selectAll("path")
        .data(fixed)
        .enter()
        .append("path")
        .attr("d", geoPath)
        .attr("id", function (d) { return d.properties.FIPS_10_; })
        .style("fill", "red")
        .style("stroke", "transparent")
        .on("mouseover", mouseOver)
        .on("mouseleave", mouseLeave)
        .on("click", mouseClick)
})

How I call tip.show in my mouseOver function:

let mouseOver = function (event, d) {
    var countryCode = event.target.__data__.properties.FIPS_10_;  
    d3.selectAll("path#" + countryCode)
        .transition()
        .duration(200)
        .style("opacity", 1)
        .style("stroke", "black")

    tip.show(event, d);

}

The problem: I put a console.log in my tip declaration. When my mouse hover over it, it shows the current country name in the console(event.target.id). However, the tooltip never show up due to the error: Uncaught TypeError: d3.event is undefined.

[bumbeishvili]

@zpfdev can you provide an online sample?

You can use this jsfiddle - https://jsfiddle.net/aftjeb0g/2/

[zpfdev]

@bumbeishvili Unforuantely, I can't seem to reproduce the same thing in jsfiddle. This is my jsfiddle https://jsfiddle.net/2ukpa84c/3/ , and it is working correctly in here. However, when I copy the exact same code to my site, I am still getting the same error. I did a trace, the error indeed happened at var targetel = target || d3.event.target; of getScreenBBox() function

My app uses Asp.Net webform and this portion of code existed in my .ascx file, which is referenced by another .ascx file, I am not sure if this has to do with it.

The behavior now: The tooltip does show up, but it is located on the top left corner of my web site and I am still getting the same error.

[bumbeishvili]

Strange, not sure how I can help, in your place I would remove later d3.event part and would try without it

[zpfdev]

if I get rid of d3.event.target, I will be getting "targetel is null". This is the image https://imgur.com/a/mgIgN7V if that helps, very strange.

I still have the same question: since this library is intended to work with V6, shouldn't d3.event not being a thing anymore? If that's the case, will that be worth to try to downgrade my d3 version to v5? ?

[zpfdev]

@bumbeishvili I downgraded my D3 version to D3v5 and it worked. I think this may be an issue worth looking into in the future. Thanks for the work tho.