Clojurescript集成數據映射設置svg寬度和高度0

我們從clojurescript渲染Datamaps，它有一個奇怪的行爲。的數據地圖是具有元件從clojurescript被傳遞，但它被以寬度和高度呈現= 0Clojurescript集成數據映射設置svg寬度和高度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">

被傳遞元件中的代碼是：

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

的globe.js在這裏被稱爲具有這種渲染功能，如：

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

我們在這裏呆了幾天了。它在頁面重新呈現時起作用，僅在第一次不起作用時才起作用。

而且，渲染功能越來越有正確的寬度和高度的div元素，我們檢查由CONSOLE.LOG

來源

2017-03-09 Mrinal Saurabh

所以我終於找到了答案。問題是，數據地圖中的默認值沒有從Clojurescript調用中調用。因此，我們必須從渲染函數本身進行默認調用：

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

來源

2017-03-14 08:45:11

你能解釋一下好不到哪此功能render是從哪裏來的。

全球集裝箱（JS /的document.getElementById「現金平衡全球」）

這個全球集裝箱不能被傳遞給反應（無論是試劑或任何反應包裝）進行渲染，如果這就是你在做。如果這個dom元素實際上呈現了svg，那麼您需要提供關於(clj->js globe-data)中返回的內容的信息，如果那是您傳遞的屬性？

來源

2017-03-10 13:48:35

Clojurescript集成數據映射設置svg寬度和高度0

回答

相關問題