Question

I am using a map of the US by counties in SVG format. I did not generate this map. It has PATH elements like:

  <path
     style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel"
     d="M 445.51998,291.515 L 451.69098,290.644 L 452.25298,290.563 L 452.85298,294.444 L 453.25798,297.212 L 447.56998,298.055 L 448.71498,296.347 L 448.73698,296.297 L 448.98998,295.683 L 449.04798,295.354 L 448.86298,294.795 L 448.70098,294.58 L 446.99298,293.975 L 446.58298,293.98 L 446.24498,294.044 L 445.92498,294.134 L 445.51998,291.515"
     id="12057"
     inkscape:label="Hillsborough, FL" />

What I want to do is on mouse hover for a popup text to appear with the county name.
In this example we see the name is held in inkscape:label="Hillsborough, FL". I am having a problem in getting this value. I have tried various versions of:

this.label
this.inkscape.labe
...

Each of these fail with undefined or null errors.
How can I read this content in javascript?
Current system specs are jQuery 1.7.2 and d3js v2 running on a ASP.NET site.

Answer 1

Something like this should work to read the attribute value (using the ID of the element in your sample):

var myLabel = $('#12057').attr('inkscape:label');