Question

我们正在从clojurescript渲染数据地图，它有一种奇怪的行为。数据图具有从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元素具有正确的宽度和高度，我们通过console.log检查

Answer 1

你能更好地解释这个函数render的来源吗？

globe-container（js / document.getElementById＆＃34; cash-balance-globe＆＃34;）

这个全局容器无法通过反应（无论是试剂还是任何反应包装器）进行渲染，如果这是你正在做的事情。如果这个dom元素实际上呈现了svg，那么你需要提供(clj->js globe-data)中返回的内容的信息，如果这是你传递的属性？

Answer 2

所以我终于找到了答案。问题是，数据图中的默认值没有从Clojurescript调用中调用。所以我们必须从render函数本身调用默认值：

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

与数据映射集成的Clojurescript设置svg宽度和高度0

2 个答案: