d3.js - iframeなしでd3ビジュアライゼーションを配置する最良の方法は?

Question

私が d3js.org で見たすべての例では、iframe を使用して、ビジュアライゼーションをページの上部と中央に配置しています。

iframe を使用せずにページにビジュアライゼーションを直接埋め込もうとすると、ページの左下、他のすべてのページ要素の下にドロップされます。

iframeを使用する以外に、ポジショニングの良い代替手段を知っている人はいますか?

Answer 1

DIV を使用します。それが私がすることです。ここでこの例を見ることができます-

Answer 2

これには CSS を使用できます。

svg{
    position:absolute;
    top:50%;
    left:0px;
}

この例では、画面の下半分に左揃えで配置します。次のように、SVG の高さと幅を設定するときに、幅は d3 で定義されます。

var width = $(window).width();
var height = $(window).height()/2;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

明らかに (そうではないかもしれませんが)、jQuery を使用してウィンドウの幅と高さを取得する必要はありません。必要に応じて転用します。ポイントはCSSビットです。

Answer 3

見ずに診断するのは難しい....SVGを使用していますか? もしそうなら、あなたの<svg>タグに が欠けている可能性がありますdisplay:blockか?

より一般的に：

ビジュアライゼーションを構成する div (ページの幅よりも幅が狭いもの) にはmargin: 0 auto、親要素内で中央に配置する必要があります。ここにもう少し情報があります。