Mouseout breaks some click functionality

This is related to #191 (and another issue in angular-datamaps). When attempting to update the fill for a particular geography by clicking a geography and using updateChoropleth, the new color only persists until mouseout, when it reverts back to the value from data-previousAttributes. I’ve created a gist to demonstrate (http://bl.ocks.org/dmachat/b75a5a01cfb31cf92cf5/af5ce473d5ab0e96627775b374e8546f434c8cd6). Would be happy to take a swing at a fix eventually, but wanted to document and get any possible thoughts on the bug at this point.

[lucaspiller]

I also had this issue and solved it with CSS, and it works fine for me. I don’t understand why JavaScript is used for highlighting / colouring.

Set this flag when initializing the map:

geographyConfig: {
  highlightOnHover: false
}

CSS:

#map path:hover { /* on mouse over */
  fill: #375682 !important;
}

#map path.active { /* on click */
  fill: #375682 !important;
}

[markmarkoh]

Yes, this is definitely a bug. They say “never store state in the DOM”, but for this piece of functionality I did exactly that and bam, a bug appears.

Using data-previousAttributes might have to go away. Perhaps we could use a quick lookup to see what base color a geography is supposed to be (preferably the same lookup call that originally sets the color).

So the flow for painting would be:

1. lookupFillColor(geo.id)
2. on('mouseenter', (geo) => { lookupHighlightFillColor() }
3. on('mouseexit', (geo) => { lookupFillColor(geo.id)}

Currently lookupFillColor in step 3 is parse(data-previousAttributes).fillColor, which leads to this bug.