d3.jsdatamaps

compare class of path elements to a dataset


I am really new to d3 and I want to make a choropleth map with the d3 datamaps so if have to compare the classes of the pathways to my dataset. So far I did manage to get the path's

html

  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"</script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="/d3map/datamaps.world.min.js"></script>
  <div id="container" style="position: relative; width: 500px; height: 300px;"></div>
  <script src="d3map.js"></script>

js code

var map = new Datamap({element: document.getElementById('container'),
  })
  var country = d3.selectAll("path")

Country is an array containing 177 elements one element in country has this form:

<path d="bunch of numbers" class="datamaps-subunit AFG" style="etc"></path>

i want to see if the country code in the class (e.g. AFG) matches one in my dataset.

Country.class gives undefined

I am probably missing something really obvious


Solution

  • Here's an example fiddle: https://jsfiddle.net/g2v5sgmz/

    You can filter specific classed elements in an array with the filter method like this:

    var country = d3.selectAll("path");
    
    var afg = country.filter(function(d,i){
       if( d3.select(this).classed("AFG") ){
            return d3.select(this);
       }
    })