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（单击＆＃34;运行代码段＆＃34;）：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

  display: block;

检查区别（点击＆＃34;运行代码段＆＃34;）：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: