データマップと統合されたClojurescriptは、svgの幅と高さを設定します。0

Question

データマップをクロージャスクリプトからレンダリングしています。データマップはclojurescriptから渡される要素を有しているが、幅と高さでレンダリングされている= 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要素を取得している、我々は、この機能renderがどこから来ているあなたはより良い説明でき

Answer 1

私はついにこの答えを見つけました。問題は、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()                                             
     }); 

Answer 2

をCONSOLE.LOGによって確認されました。

世界-コンテナ（JS /のdocument.getElementById「キャッシュバランス-世界」）

それが何場合は、このグローバルなコンテナは、レンダリングのため（それは試薬または任意のラッパーを反応させること）に反応する渡すことはできませんあなたがやっている。このdom要素が実際にsvgをレンダリングする場合、返されるものに関する情報を(clj->js globe-data)に渡す必要があります。