Ember 1.13：複数のキャンバス

Question

いくつかのキャンバスがあります。これまでは、d3を使用してDOM要素に直接追加しました。 1つのことを除いてすべてが完全に機能します。フッターを追加すると、最後のキャンバスがオーバーレイされます。これを修正するには？

テンプレート/ dashboard.hbs

<div class="row"> 
    {{my-chart canvasesNumber=3}} 
</div> 
<footer> 
    Some info 
</footer> 

コンポーネント/私の-chart.js

export default Ember.Component.extend({ 
    ... 
    canvasesNumber: null, 

    init: function() { 
     this._super(); 
     id = '#' + this.elementId; 
     for (i = 0; i < this.canvasesNumber; i++) { 
      d3.select(id).append('canvas') 
          .attr({ 
           'width': 200, 
           'height': 100, 
          }).style({ 
           'position': 'absolute', 
           'z-index': 0, 
           'left': '0px', 
           'top': (100 * i) + 'px' 
          }); 
     } 
    } 
}); 

おかげ

Answer 1

あなたがポジションを使用する必要はないかもしれません。絶対に。またはそれをサポートするスタイルプロパティのいずれかです。絶対的なポジショニングは、それがフッターをカバーするのを見ている理由です。私はディスプレイのようなものを使うことをお勧めします：inline-block; OR float：left;ポジションはすべてです。

jsbinまたはcodepenの例を提供できる場合は、例を参考にしてください。がんばろう！