score:0

Accepted answer

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()                                                                                                                                                                                 
        });

score:0

Can you explain better where this function render is coming from.

globe-container (js/document.getElementById "cash-balance-globe")

This global container can't be passed to react(be it reagent or any react wrapper) for rendering, if that's what you are doing. If this dom element in fact renders the svg, then you need to provide information on what is returned in (clj->js globe-data), if that are the properties that you are passing?


Related Query