Javascript 使svg容器在数组循环中一个接一个地出现

下面的代码创建了两个不同高度和宽度的svg容器，它是为数组中的每个元素创建的。代码运行良好，但我希望包含标题1的svg容器text1显示在显示标题2的svg容器text2下方，而不是并排显示，这就是它现在的显示方式，即彼此相邻。如何使容器2显示在容器1的正下方

这是密码

function draw(data) {
    data.forEach(function(d) {
        var text1 = d3.select("body").append("svg")
            .attr("width", 200)
            .attr("height", 100);

        var title1 = d.values.title1;

        text1.append("text")
            .attr("x", "50%")
            .attr("y", "10%")
            .text(title1);

        var text2 = d3.select("body").append("svg")
            .attr("width", 300)
            .attr("height", 500);

        var title2 = d.values.title2;

        text2.append("text")
            .attr("x", "40%")
            .attr("y", "10%")
            .text(title2);
    });
}

---

您可能只需更改CSS就可以解决您的问题。默认情况下，如果页面中有足够的空间，SVG将并排显示。在此代码段中，生成了5个SVG（单击“运行代码段”）：

var数据=d3.范围（5）；
变量主体=d3。选择（“主体”）；
var svg=body.selectAll（“svg”）
.数据（数据）
.输入（）
.append（“svg”）
.attr（“宽度”，100）
.attr（“高度”，100）
svg{
背景色：青色；
右边距：5px；
}
它对循环有效吗？例如，在第二次迭代期间，我希望svg容器1和2出现在前一次迭代产生的容器的一侧，而不是使每件事物都出现在另一个之下？？？看，这是一个不同的问题。如果您还有其他问题，请提出另一个问题。有没有不使用JavaScript的方法？我只想使用css
@SalahAdDin我不理解你的问题，所以请把它作为一个新问题发布，并附上相关信息。