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

Question

我有以下代码，我创建了两个不同高度和宽度的 svg 容器，并为数组中的每个元素创建它。该代码运行良好，但我希望包含 title1 的 svg 容器 text1 显示在显示 title2 的 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);
    });
}

Answer 1

您可能只需更改 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>

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

  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>