How to display property text on mouseover in d3 map

Question

I am new to d3 and trying to figure out how to get a property ("NAME") to show up when hovering over a polygon in a map. I am aware that I should be doing something along the lines of `.on("mouseover", function(d,i) { some function that returns properties.NAME }` but can't figure out where to go from there. Here is the js as written, which just statically places the NAME property on each polygon: ``` <script> var width = 950, height = 650; var projection = d3.geo.albers() .scale(120000) .center([22.85, 40.038]); var path = d3.geo.path() .projection(projection); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("newnabes.json", function(error, topology) { var nabes = topojson.object(topology, topology.objects.temp); svg.selectAll("path") .data(nabes.geometries) .enter().append("path") .attr("d", path); svg.selectAll(".subunit-label") .data(nabes.geometries) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id…

Accepted Answer

So I figured it out, courtesy of: Show data on mouseover of circle

The simplest solution is to just append the names to the svg title attribute:

```
svg.selectAll("path")
 .data(nabes.geometries)
 .append("svg:title")
 .attr("class", function(d) { return "path " + d.id; })
 .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
 .attr("dy", ".35em")
 .text(function(d) { return d.properties.NAME; });
```

Still investigating a more stylish solution to the problem (eg tipsy).

How to display property text on mouseover in d3 map

Solution

Problem

Related problems