Question

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

模板/ 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

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

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

Ember 1.13：多幅画布

1 个答案: