複数のチャートの配置がD3でどのように機能するのか混乱します。最終目標は、マルチチャートダッシュボードを作成することです。複数のチャートをD3に配置
テイクthis multiple chart example。なぜ私は2番目のチャート（右上）がそのポジションを選んだのか分かりません。 2番目のグラフを最初の位置に配置するコードには何もありません（私が見ることができます）。最初の下に2番目のチャートを配置するにはどうすればいいですか？
私はD3が初めてで、誰かが正しい方向に向けることを願っています。事前に多くの感謝！
SVGがデフォルトで表示されますinlineそのため、リンクしたコードでは、最初のSVGが左上になり、2番目のSVGは右に配置されます。
チェックこのデモは、両方のSVGsは、本体、左上隅の最初の1とその右に二番目に追加されます：あなたが位置する場合
var svg = d3.select("body").selectAll("foo")
.data([1, 1])
.enter()
.append("svg")
.attr("width", 100)
.attr("height", 100);svg {
background-color: tan;
margin-right: 10px;
margin-bottom: 10px;
}<script src="https://d3js.org/d3.v4.min.js"></script>SVGが1つ上にある場合は、display: blockを使用します。
ここには、その変更と同じコードがあります。今第SVGは、第一の下に添付されている：
var svg = d3.select("body").selectAll("foo")
.data([1, 1])
.enter()
.append("svg")
.attr("width", 100)
.attr("height", 100);svg {
background-color: tan;
margin-right: 10px;
margin-bottom: 10px;
display: block;
}<script src="https://d3js.org/d3.v4.min.js"></script>動作方法はCSSです。コードは<body>に2 <svg> DOMエレメントを作成しました。ここをクリックjsfiddle example
これを利用して独自の複数のチャートを作成することができます。他のテクニックも可能です（単一の<svg>要素に両方を作成し、個別の図を含む<g>要素の変換変換を処理することも可能です）。後者の例を次に示します。Scatterplot Matrix Brushing