使得svg容器在数组循环中出现 [英] Making svg container appear one below another on array looping

问题描述

我有以下代码，其中我创建了两个不同高度和宽度的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）; 
}）; 
} 
  

解决方案

只是改变你的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：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;显示：block; margin-bottom：5px; }  

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

I have the following code where I created two svg container of different height and width and it is created for every element in the array. The code works well but I want the svg container text1 which contains title1 to appear below the svg container text2 that displays the title2 rather than side by side that's how it appears now, i.e., next to each other. How to make container 2 to appear just below the container 1

Here is the code

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

解决方案

You probably can solve your problems just changing your CSS. By default, SVGs will display side by side, if there is enough room in the page. In this snippet, 5 SVGs are produced (click "run code snippet"):

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>

This is exactly the same code, but setting the display in the CSS:

  display: block;

Check the difference (click "run code snippet"):

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>

这篇关于使得svg容器在数组循环中出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！