Issue with tooltip on county map

Community Help
1

I am adding tooltips to a county map. The main data(in data[0]) is a geojson file and I want to display the county name (which is data[0].features.properties NAME). The code below outputs the map and highlights selected counties (via fillContent()). When I attempt to create the tooltips, the data read by the mouseover statement is the MouseEvent, not the original data used by the rest of the code (i.e., data[0].features). This behavior is confusing me, it doesn’t seem to match any of the examples I see online. Any suggestions about how to access the original data?

var div = d3.select(outputProfile).append(“div”).attr(“class”,“tooltip”).style(“opacity”,0);
var OutputMap = d3.select(outputProfile).append(‘svg’).attr(‘width’, width).attr(‘height’, height);

//Plotting County Map
OutputMap.append(“g”)
.selectAll(“path”)
.data(data[0].features)
.enter()
.append(“path”)
.attr(‘class’,‘cty’)
.attr(‘d’, geoGenerator)
.attr(‘stroke’, ‘#000’)
.attr(‘fill’,function(d){ return fillContent(fipsArr,d);})
.on(“mouseover”, function(d) {
div.transition()
.duration(200)
.style(“opacity”, 1);
div.text(d.properties.NAME) // This line throws an error, Uncaught TypeError: Cannot read property ‘NAME’ of undefined
.style(“left”, (event.pageX) + “px”)
.style(“top”, (event.pageY - 28) + “px”);
})
.on(“mouseout”, function(d) {
div.transition()
.duration(500)
.style(“opacity”, 0);
});

TIA
AB

2

When I added title text I did it like this:

 .append("title")
        .text( (o,m,g) => g[m].parentNode.parentNode.id)

The lettering is bad but the three values parsed are data, iterator and selected item.

You can dump these to the console to have a better look at the objects, but I think you are looking for a reference off the g and not the d

.on(“mouseover”, function(d,i,g) {
  div.transition()
     .duration(200)
     .style(“opacity”, 1);
  div.text(g.properties.NAME)
}

This is just a rough idea as I would really need to see the code to debung the correct value/pointer.