D3js Openui5のカスタムコントロールの問題

Question

私はopenui5 Tabstripを使用しています。各タブには、個別のjsとコントローラが含まれています。 それぞれのタブには2つのビュー（私は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を置くことで問題の時間は解決されますが、適切な修正はできません。ビューをレンダリングした後に誰もそれを避けてチャートをレンダリングする方法を教えることができます。したがって、上記の問題は、1つのタブ内で2つのビューを持つnavcontainerを使用する場合です。 と私は1つのタブから別のタブに変更し、同じタブに戻りますアクティブなビューは正常に動作していますが、私は2番目のビューを移動する場合、問題が発生しました。 この問題は、タブビューを変更した場合にのみ発生します。

Answer 1

"setTimout"を使用するのではなく、コントロールにonAfterRenderingイベントを登録する必要があります。これにより、レンダリングが完了した時点で正しいタイミングを得ることができます。

コメントを編集

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

、それはあなたを助けることを願っています。）