D3 datamaps changing border width on mouseover - d3.js

Question

I'm trying to make a combined map/chart visualization work. I want to be able to mouseover/select a country on the map, and have an effect applied not only to the country but also to the line on the chart representing the country's data (of whatever, let's say population growth over the last decade).
In the done section of the map initialization, I use a callback highlightMap and pass in the countryName. This in theory would also be called by the chart when I mouseover that.
Questions:
1) In highlightMap my attempt to get the country element and change it's border width doesn't work. What's the right way to grab a map subunit and apply an effect to it?
2) Is this the right way to do this in general?
var map;
function setupMap(mouseoverCallback, mouseoutCallback) {
var width = mapWidth;
var height = mapHeight;
map = new Datamap({
element: document.getElementById(mapContainerDiv),
projection: 'mercator',
// responsive: true,
width: width,
height: height,
fills: {
defaultFill: "#ffffff"
},
geographyConfig: {
borderColor: '#000000',
},
data: {},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('mouseover', function(geography) {
var countryName = geography.properties.name;
highlightMap(countryName);
});
datamap.svg.selectAll('.datamaps-subunit').on('mouseout', function(geography) {
var countryName = geography.properties.name;
highlightMap(countryName);
});
}
});
}
function highlightMap(name, highlight) {
var code = country2Code[name];
if (highlight) {
var countryElement = map.svg.select("#datamaps-subunit "+code);
countryElement.attr('stroke-width', 10); // Change border of country to something nutty
// reset color
...
}
}

Answer 1

Sort out your selectors:
.datamaps-subunit is not the same as #datamaps-subunit
Moreover, each country geometry has an additional class (like "ESP" or "USA") with the country code
To later select the country you just use map.svg.selectAll(".datamaps-subunit.ESP") or map.svg.selectAll(".datamaps-subunit.USA")
Notice there is no space between class names, as they are applied to the same SVG element
Use select() or selectAll() depending on how many elements you expect to get (one or possibly many)
EDIT: A much easier option would be to simply add this rule to your CSS sheet:
.datamaps-subunit:hover {
stroke-width: 2px;
}