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