D3UI自定義控制問題在OpenUI5

Question

我使用的是openui5 Tabstrip。每個選項卡包含獨立的js和控制器。 再次每個選項卡包含兩個視圖（我使用sap.m.NavContainer），每個視圖是一個單獨的JS視圖。 ，我爲d3 js項目符號表編寫自定義控件，如下所示 var thisId;

/*子彈圖：一個UI5自定義控件包裝一些D3.js代碼*/

sap.ui.core.Control.extend("control.BulletChart", { 
    /* the control API */ 
    metadata : { 
     properties : { 
       "items" : { type: "any" }, 
       "colorType" :{type:"string"}, 
       "height" : {type: "int"}, 
       "width" : {type: "int"}, 
       "popup" : {type: "any"} 
      }, 
     events: { 
      "select" : {}, 
      "selectEnd": {}, 
      //"click": {} 
     }   
    }, 


    // the part creating the HTML: 
    renderer : function(oRm, oControl) {  
     oRm.write("<div"); 
     oRm.writeControlData(oControl); 
     oRm.addClass("bullet");    
     oRm.writeClasses();        
     oRm.write(">"); 
     oRm.write("</div>"); 
    }, 

    onAfterRendering: function() { 
     var that = this; 

     var deepClonedCopy = jQuery.extend(true, {}, this.getItems()); 
     var data; 
     data = $.map(deepClonedCopy, function(el) { return el }); 
     var customId=this.getId(); 

     if(data){ 
     if(data[0]){ 
     data[0].ranges = JSON.parse("["+data[0].RANGES+"]"); 
     data[0].measures = JSON.parse("["+data[0].MEASURES+"]"); 
     data[0].markers = JSON.parse("["+data[0].MARKERS+"]"); 
     } 

     var containerWidth = $("#"+customId).parent().width(); 
     var margin = {top: 15, right: 30, bottom: 20, left: 30}, 
     width = containerWidth- margin.left - margin.right, 
     height = 65 - margin.top - margin.bottom; 

     console.log("Actual bulletWidth",width); 
     var chart = d3.bullet() 
     .width(width) 
     .height(height); 
     var classType; 
     if(this.getColorType()){ 
      classType = "reversebullet"; 
     } 
     else{ 
      classType = "bullet"; 
     } 
     var svg = d3.select("#"+customId).selectAll("svg") 
      .data(data) 
     .enter().append("svg") 
      .attr("class", classType) 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      //.on("click", click) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
      .call(chart); 
     } 

}); 

現在我的問題是我使用這樣的事情在我view.js

bulletChart = new control.BulletChart({ 
               layoutData: new sap.ui.layout.GridData({span: "L8 M12 S12"}), 
              items: { 
               path : "/genericData", 
               } 
             }), 

而且在我的控制器下面的代碼寫在onInit上：

var oBusinessData = { 
            "genericData":[ 
             { "key":"1","RANGES":"50,75,100","MEASURES":20,"MARKERS":80,"tab":"sdto"}, 
           ]}; 
buBullet.setModel(new sap.ui.model.json.JSONModel(oBusinessData)); 

按照上面的代碼wh我第一次打開標籤，它完美的工作，但當我切換標籤，我的子彈圖出現擠壓。當我對var containerWidth = $("#"+customId).parent().width();發出警報時，我看到的寬度比它的實際寬度更小，可能是由於圖表渲染髮生得比其父項更快，所以將setTimeout解決問題的時間，但不是一個正確的解決方案。任何人都可以告訴如何避免它，並呈現視圖後呈現圖表。所以上面的問題是在單個選項卡中使用帶有兩個視圖的navcontainer時。 如果我從一個選項卡更改爲另一個選項卡，然後返回相同的選項卡活動視圖工作正常，但如果我導航第二個視圖發生問題。 只有當我更改選項卡視圖時纔會發生此問題。

Answer 1

您應該向控件註冊onAfterRendering事件而不是使用「setTimout」，通過這樣做，您可以在渲染完成時獲得正確的時間。

parentControl.addEventDelegate({ 
        "onAfterRendering": function() { 
         // parentControl has been rendered, here comes the code.. 
         // Now here has the rendering finished, now you can get 
         // the correct height of parentControl. 
        } 
      }, this); 

編輯註釋，希望它會幫助你;）