使 svg 容器在数组循环中出现在另一个容器下面

我有以下代码，我创建了两个不同高度和宽度的 svg 容器，并为数组中的每个元素创建它。该代码运行良好，但我想要 svg 容器 text1 其中包含title1出现在 svg 容器 text2 下方，显示title2而不是像现在这样并排，即彼此相邻。如何使容器 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 data = d3.range(5);

var body = d3.select("body");

var svg = body.selectAll("svg")
  .data(data)
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100);

svg {
  background-color: teal;
  margin-right: 5px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这是完全相同的代码，但是设置display在CSS中：

  display: block;

检查差异（点击“运行代码片段”）：

var data = d3.range(5);

var body = d3.select("body");

var svg = body.selectAll("svg")
  .data(data)
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100);

svg {
  background-color: teal;
  display: block;
  margin-bottom: 5px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>