search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

How to enable the hover effect only on selected countries of a world map #24

Closed turbowars closed 8 years ago

turbowars commented 10 years ago

Hi guys,

Have a look at: http://jsfiddle.net/turbowars/8J9mG/

Can anyone suggest me a way to enable the hover effect only on selected countries of the world map?

markmarkoh commented 10 years ago

Does this work the way you want it to?

http://jsfiddle.net/8J9mG/21/

turbowars commented 10 years ago

Thanks for the tweak, and I wanted to disable the country "color fill (pale pink)" effect on hover. In addition to that, can we highlight just the border of the country on hover?

turbowars commented 10 years ago

Fixed it by editing the datamaps.world.js and commented the line #153 //style('fill', options.highlightFillColor)

More reliable code would be to use an if condition and define "highlightFillColor" variable as "existing" and replace the existing code with the below code: $this .style('stroke', options.highlightBorderColor) .style('stroke-width', options.highlightBorderWidth) .style('fill-opacity', options.highlightFillOpacity) .attr('data-previousAttributes', JSON.stringify(previousAttributes));

        if(options.highlightFillColor != "existing"){
             $this.style('fill', options.highlightFillColor);
            } </code>
markmarkoh commented 10 years ago

I think the longer term solution will be to let these properties be either strings ( as they are now ) or functions.

So you could say:

geographyConfig: { highlightFillColor: '#fa0fa0' }

or

geographyConfig: { highlightFillColor: function(data) { 
    /* logic */
   return '#fa0fa0';
}
}

The data would be the corresponding data you sent in. So in your example, if it's null, return nothing and I would set a highlight fill.

samsonkhisty commented 9 years ago

For anyone else, The data is not being passed but I still have the path element that has a data-info attribute. One other way I managed to work this out is by doing something like below. That way, I can have different hover colors based on the data. 

geographyConfig:
    highlightBorderColor: (geo) ->
      if $(this).data("info")?
        return '#7eccf2'
      return '#ddd'  
    highlightBorderWidth: 1
    highlightFillColor: (geo) ->
      if $(this).data("info")?
        return '#acdef6'
      return '#eee'