余数1.13:多幅油画

Question

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

模板/dashboard.hbs

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

组件/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

您可能不需要使用位置:绝对值；或任何支持它的样式属性。绝对定位是为什么你看到它覆盖页脚。我建议使用更类似于显示的东西:内联块；或浮动:左；位置就是一切。

如果您可以提供一个jsbin或codepen示例，我可以帮助处理一个示例。祝好运!