Ember 1.13：多个画布

Question

有几个画布。到目前为止，我使用 d3 将它们直接添加到 DOM 元素中。除了一件事之外，一切都完美无缺：当我添加页脚时 - 它覆盖了最后一个画布。如何解决这个问题？

模板/dashboard.hbs

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

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

谢谢

Answer 1

您可能不需要使用 position: absolute;或任何支持它的样式属性。绝对定位是您看到它覆盖页脚的原因。我建议使用更像 display: inline-block; 的东西。或浮动：左；位置就是一切。

如果您可以提供 jsbin 或 codepen 示例，我可以提供示例。祝你好运！