Ember 1.13: mehrere Leinwände

Question

Es gibt mehrere Leinwände. Bisher habe ich sie direkt mit D3 zum DOM-Element hinzugefügt. Alles funktioniert perfekt bis auf eine Sache: Wenn ich eine Fußzeile hinzufüge - es überlagert die letzte Leinwand. Wie behebe ich das?

templates/dashboard.hbs

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

Komponenten/my-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' 
          }); 
     } 
    } 
}); 

Dank

Answer 1

Sie werden vielleicht nicht Position verwenden müssen: absolute; oder eine der Stileigenschaften, die sie unterstützen. Absolute Positionierung ist der Grund dafür, dass Sie die Fußzeile überdecken. Ich würde vorschlagen, etwas mehr wie Display zu verwenden: Inline-Block; ODER float: links; Position ist alles.

Wenn Sie ein Beispiel für Jsbin oder Codepen bereitstellen können, kann ich mit einem Beispiel helfen. Viel Glück!