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

Question

我们正在从 clojurescript 渲染 Datamaps，它有一个奇怪的行为。数据映射具有从 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 的来源吗？

地球容器（js/document.getElementById "cash-balance-globe"）

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

Answer 2

所以我终于找到了这个问题的答案。问题是，数据映射中的默认值没有从 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()                                                                                                                                                                                 
        });

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

Clojurescript integrating with datamaps sets svg width and height 0

javascript

d3.js

clojurescript

datamaps