Put 2 svg side by side

Question

I am able to use 2 svg on one screen in d3.js. The Code looks like this and it works great:

<svg width="880" height="800" id="svg1"></svg>  
<svg width="880" height="800" id="svg2"></svg>

var svg1 = d3.select("#svg1");

var svg2 = d3.select("#svg2");

My only problem is, that svg2 appears under svg1. But my goal is to put them side by side. Do you guys know how to solve that problem? I tried to manipulate the x position of svg2 with this code:

<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>

but this was not the right solution. Thanks guys!!

Answer 1

In HTML, the svg> element has the display inline by default, meaning that you don't need to do anything to show them side by side.

This is a small demo to proof it:

 var svg = d3.select("body") .selectAll("feynman") .data([0,1]) .enter() .append("svg") .attr("width", 100) .attr("height", 100) .style("background-color", function(d){ return d? "blue" : "orange"; }); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

The issue in you case is the width: as each SVG has 880px wide, you'll need a window with at least 1780px to see them side by side.

An alternative is putting both SVGs in a <div> with a width greater than 1760px (as LeBeau explains in his answer here ), which will create a scroll bar at the bottom:

 <div style="width:1770px"> <svg width="880" height="160" id="svg1" style="background-color:blue"></svg> <svg width="880" height="160" id="svg2" style="background-color:orange">></svg> </div> 

You can also play with overflow and overflow-x .