[解決済み] 2つのsvgを並べる

質問

d3.jsで1画面に2つのsvgを使用することができます。コードは以下のようなもので、とてもうまくいっています。

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

唯一の問題は、svg2がsvg1の下に表示されることです。しかし、私の目標は、それらを並べて配置することです。皆さんはこの問題を解決する方法をご存知ですか？私はこのコードでsvg2のx位置を操作しようとしました。

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

が、これは正しい解決策ではありませんでした。 ありがとう、みんな!

どのように解決するのですか？

HTMLでは svg> 要素には、表示 インライン はデフォルトで、つまり何もしなくても横に並べて表示されます。

これは、それを証明するための小さなデモです。

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>

この場合、問題は幅です。各SVGの幅が880pxなので、それらを並べて表示するには、少なくとも1780pxのウィンドウが必要です。

代替案としては、両方のSVGを <div> を1760px以上の幅で指定します（LeBeauの説明では の回答はこちらです。 ) が表示され、下部にスクロールバーが表示されます。

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

を使って遊ぶこともできます。 overflow と overflow-x .