CODEWITHSUNDEEP
javascriptcssd3.jssvg
SuzukiBlue
SuzukiBlue

Reputation: 135

D3 map - combine two disjoint svg polygon paths into one path

This is my 3rd follow up question on the interactive map with tooltip.

The original map used USA states coordinates. I am trying to build a map of Europe (hence my previous question on excluding some polygons from hovering to draw the physical shape of the continent but allow a tooltip only above EU members only).

In my work I initially inspired myself by Peter Collingridge svg tutorial where most country polygons are expressed in svg paths. For the source of SVG maps he is advising Wikimedia and there I found a Firefox Mozilla Europe map with very well defined country paths.

Everything was going well until I stumbled on two countries: Russia and Great Britain.

In the original USA dataset even states composed of multiple polygons such as Massachusets are expressed with one unique d: property. 

{id:"MA",n:"Massachusets", d:"M899.62349,(...), 153.35923L855.45082,152.06593Z"},

whereas the above mentioned UK and Russia are expressed with two distinct ds:

<g id="ru" transform="matrix(1.43317, 0, 0, 1.43317, -2435.49, -1086.58)">
<path id="ru-main" d="M 9462.6109,(...),2763.2929 z "/>
<path id="ru-kgd"  d="M 6989.6109,(...),3728.389 z "/>
</g>

plus there is this attribute transform = "matrix(...)"

This problem I have solved by applying this tool nonetheless in the Mozilla Firefox map Russia is composed of two paths with two separate ids: id="ru-main" and id="ru-kgd"same thing for UK.

I'd like to make sure that whenever a user is hovering above mainland Russian or Kaliningrad strip the entire territory of Russia gets highlighted.

Is there a way to do it?

Upvotes: 0

Views: 937

Answers (1)

Mehdi
Mehdi

Reputation: 7403

I'd like to make sure that whenever a user is hovering above mainland Russian or Kaliningrad strip the entire territory of Russia gets highlighted.

Is there a way to do it?

What you want to do is to watch the mouse event at country (<g>) level, and apply the hover effect to all the hovered <g>'s children <path> elements.

var countries= d3.selectAll('g')

countries.on('mouseenter', function(d, i) { //mouse starts hovering a country's shape

  d3.select(this)             // select the hovered country
    .selectAll('path')        // select all its children paths
    .style('fill', '#75D9FA') // apply desired effect to the paths
})

countries.on('mouseleave', function(d, i) { //mouse stops hovering a country's shape
  // follow same logic as above to reset original style
  d3.select(this)
    .selectAll('path')
    .style('fill', '#24BDF0')
})

Here is a working example using a data structure similar to the one presented in your question.

Upvotes: 0

Related Questions