javascriptangularjsd3.jsimportdatamaps

Datamaps is giving me a Cannot read property 'albersUsa' of undefined

I'm getting this error when try to create a map:

Datamaps error I'm currently using version "datamaps": "^0.5.8", this is directly from my package.json. I also checked the package.json in the actual package to see where main was pointing:

Datamaps package.json <code>main</code> parameter I found a related issue, maybe even the same issue here:

https://github.com/markmarkoh/datamaps/issues/259

Problem is that no one ever said what the answer was, one person mentioned that only a specific country js file was being loaded but I checked and datamaps.all.js is being loaded.

Solution

  • This is to be attributed to the new modularity of D3 v4, which made it necessary to flatten namespaces:

    However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x.

    For your code this means that some references using the d3-geo module are invalid because they refer to properties which are no longer available in v4:

    Geographies (d3-geo)

    Because datamaps has defined a dependency on D3 like ^3.5.6 this will include D3 v4. However, because of the above mentioned changes in the namespace you will have to use a D3 v3 instead.