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

Simple world map example - Invalid value for <path> attribute d="MNan,NanLNan.... #144

Closed ninjatronic closed 10 years ago

ninjatronic commented 10 years ago

Here is the repo if you care to try to reproduce this. Very basic code. Simply npm install && ember serve - then http://localhost:4200.

I am using datamaps.world.js as you can see in the Brocfile.

This is the generated javascript that tries to draw the map.

define("vapour/views/application", 
  ["ember","exports"],
  function(__dependency1__, __exports__) {
    "use strict";
    var Em = __dependency1__["default"];
    var ApplicationView;

    ApplicationView = Em.View.extend({
      didInsertElement: function() {
        return this.controller.set('datamap', new Datamap({
          element: '.map-container',
          scope: 'world'
        }));
      }
    });

    __exports__["default"] = ApplicationView;
  });//# sourceURL=vapour/views/application.js

There are lots of these errors in the console...

Error: Invalid value for <path> attribute d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNZ" vendor.js:77646attrFunction vendor.js:77646(anonymous function) vendor.js:77929d3_selection_each vendor.js:77935d3_selectionPrototype.each vendor.js:77928d3_selectionPrototype.attr vendor.js:77628drawSubunits vendor.js:99050draw vendor.js:99462Datamap.draw vendor.js:99441Datamap vendor.js:99417Em.View.extend.didInsertElement vapour/views/application.js:10apply vendor.js:31552superWrapper vendor.js:31132EmberObject.extend.trigger vendor.js:52456apply vendor.js:31554superWrapper vendor.js:31132ViewCollection.trigger vendor.js:55374merge.insertElement vendor.js:52921CoreView.extend._insertElement vendor.js:54386DeferredActionQueues.invoke vendor.js:13806DeferredActionQueues.flush vendor.js:13858Backburner.end vendor.js:13321Backburner.run vendor.js:13376apply vendor.js:31555run vendor.js:30173runInitialize vendor.js:15613fire vendor.js:3237self.fireWith vendor.js:3349jQuery.extend.ready vendor.js:3561completed vendor.js:3592

Hopefully this is not another case of my idiocy leaking

markmarkoh commented 10 years ago

No idiocy, I think it's just that element is a string and it's expecting a DOM node. Try something like and let me know if it fixes this issue:

...
element: this.$('.map-container')[0],
...

If it does, I should add better warnings if the wrong type of values are sent in.

ninjatronic commented 10 years ago

Yes, that does the trick. Thanks