Clojurescript integrating with datamaps sets svg width and height 0

Question

We are rendering Datamaps from clojurescript and it is having a weird behaviour. The datamaps is having the element being passed from clojurescript but it is being rendered with width and height = 0.

<div id="cash-balance-globe" class="cash-balance-globe tile-date-info" style="width: 361px;height: 187px;">
<svg width="0" data-width="0" class="datamap" height="0" style="overflow: hidden;"><g id="" class="datamaps-subunits">

The code that is passing in the element is:

(defn cash-balance-globe                                                                                                                                                                                          
  ^{:externs [[globe.render] [globe.highlightBubble]]}                                                                                                                                                            
  [cash-balance-by-country selected-country-atom]                                                                                                                                                                 
  (let [globe-data (doall (map #(assoc %                                                                                                                                                                          
                                       :name (get % "country")                                                                                                                                                    
                                       :value (get % "balance")) cash-balance-by-country))]                                                                                                                       
    (letfn [(reagent-render [] (let [country-selected? (not (nil? @selected-country-atom))                                                                                                                        
                                     selected-country-cash-balance (first (filter #(= (:name %) @selected-country-atom) globe-data))]                                                                             
                                 [:div                                                                                                                                                                            
                                  (if country-selected?                                                                                                                                                           
                                    [selected-country-breakdown-table selected-country-cash-balance]                                                                                                              
                                    [:div "Select country to see detail"])                                                                                                                                        
                                  [:div {:id "cash-balance-globe"                                                                                                                                                 
                                         :class "cash-balance-globe tile-date-info"                                                                                                                               
                                         :style {:width "360px" :height "187px"}}]]))                                                                                                                             

            (component-did-mount [] (let [set-selected-country (fn [x]                                                                                                                                            
                                                                 (reset! selected-country-atom                                                                                                                    
                                                                         (get (js->clj x) "name")))                                                                                                               
                                          globe-container (js/document.getElementById "cash-balance-globe")]                                                                                                      
                                      (.. js/globe                                                                                                                                                                
                                          (render globe-container (clj->js globe-data) set-selected-country popup-template #js [7 20]))                                                                           

                                      (when (not (nil? @selected-country-atom))                                                                                                                                   
                                        (.. js/globe                                                                                                                                                              
                                            (highlightBubble @selected-country-atom globe-container)))                                                                                                            
                                      ))]                                                                                                                                                                         
      (r/create-class                                                                                                                                                                                             
       {:reagent-render reagent-render                                                                                                                                                                            
        :component-did-mount component-did-mount}))))

The globe.js being called here has this render function like:

ns.render = function(container, countriesData, onCountrySelect, popupText, radiusRange) {                                                                                                                     
        var values = function(d) { return d.value; };                                                                                                                                                             
        var radiusScale = d3.scale.linear()                                                                                                                                                                       
            .domain([0,d3.max(countriesData, values)])                                                                                                                                                            
            .range(radiusRange);                                                                                                                                                                                  

        var globalMap = new Datamap({                                                                                                                                                                             
            element: container,                                                                                                                                                                                   
            scope:'world',                                                                                                                                                                                        
            geographyConfig: {                                                                                                                                                                                    
                borderColor:'#818181',                                                                                                                                                                            
                popupOnHover: false,                                                                                                                                                                              
                highlightOnHover: false                                                                                                                                                                           
            },                                                                                                                                                                                                    
            fills: countryFills()                                                                                                                                                                                 
        });

We are stuck in this for days now. It works when the page re-renders, only first time it is not working.

Also, the render function is getting the div element with correct width and height, we checked by console.log

Answer 1

So I finally found the answer to this. The problem was, defaults in datamaps was not getting invoked from Clojurescript call. So we had to make the defaults call from the render function itself as:

 ns.render = function(container, countriesData, onCountrySelect, popupText, radiusRange) {                                                                                                
        var values = function(d) { return d.value; };                                                                                                                                        
        var radiusScale = d3.scale.linear()                                                                                                                                                  
            .domain([0,d3.max(countriesData, values)])                                                                                                                                       
            .range(radiusRange);                                                                                                                                                             

        var height = 168;                                                                                                                                                                    
        var width = 360;                                                                                                                                                                     

        var globalMap = new Datamap({                                                                                                                                                        
            element: container,                                                                                                                                                              
            scope:'world',                                                                                                                                                                   
            height: height,                                                                                                                                                                  
            width: width,                                                                                                                                                                    
            "data-width": width,                                                                                                                                                             
            setProjection: function() {                                                                                                                                                      
                var projection = d3.geo.equirectangular()                                                                                                                                    
                    .scale(width / 2 / 3.1415926535)                                                                                 
                    .translate([width / 2, height / 2]);                                                                                                                                     
                var path = d3.geo.path().projection( projection );                                                                                                                           
                return {path: path, projection: projection};                                                                                                                                 
            },
            fills: countryFills()                                                                                                                                                                                 
        });