Making Svg Container Appear One Below Another On Array Looping

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 c

Solution 1:

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

<scriptsrc="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;
  }

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