Ember 1.13: несколько холстов

Question

Имеются несколько холстов. До сих пор я добавлял их непосредственно к элементу DOM, используя d3. Все работает отлично, кроме одного: когда я добавляю нижний колонтитул, он накладывает последний холст. Как это исправить?

шаблоны/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

Вы, возможно, не нужно использовать позицию: абсолютная; или любые свойства стиля, которые его поддерживают. Абсолютное позиционирование - это то, почему вы видите, что оно покрывает нижний колонтитул. Я бы предложил использовать что-то большее, как display: inline-block; OR float: left; Позиция - это все.

Если вы можете предоставить пример jsbin или codepen, я могу помочь с примером. Удачи!