I am working on a project involving a map of Kansas City that includes data on the number of crimes in each neighborhood. My goal is to add a tooltip that displays this crime data when hovering over each district. Here is how I have set it up so far:
var map = d3.select('#map').selectAll('path')
.data(data[0].features)
.enter()
.append('path')
.attr('d', path)
.style('stroke', 'black')
.style('stroke-width', 0.75)
.on('mouseover', function(d) {
var tooltip = d3.select('#myTooltip');
tooltip.style('display', 'block');
tooltip.style('left', d3.event.pageX);
tooltip.style('top', d3.event.pageY);
tooltip.html(d.properties.neighbourhood + ': ' + d.count);
})
.on('mousemove', function(d) {
// var tooltip = d3.select('#myTooltip');
tooltip.style('left', d3.event.pageX);
tooltip.style('top', d3.event.pageY);
})
.on('mouseleave', function(d) {
// var tooltip = d3.select('#myTooltip');
tooltip.style('display', 'none');
});
I also have a separate map.datum where I define the colors for the districts. However, upon loading the page, there seems to be an issue with event handling and some unusual code appears in the web inspector.
function(i) {
var o = t.event;
t.event = i;
try {
n.call(this, this.__data__, e, r)
} finally {
t.event = o
}
}
Have any of you encountered this problem before or do you have any suggestions on what I might be doing wrong?
Any help or advice would be greatly appreciated!