d3.js - 在没有 iframe 的情况下定位 d3 可视化的最佳方式？

Question

我在 d3js.org 上查看的所有示例都使用 iframe 将可视化定位在页面顶部和中心。

当我尝试直接在页面上嵌入可视化而不使用 iframe 时，它​​会下降到页面的左下角，在所有其他页面元素下。

除了使用 iframe 之外，任何人都知道定位的任何好选择吗？

Answer 1

您可以为此使用 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 2

使用 DIV。我就是做这个的。你可以在这里看到一个例子——

Answer 3

没有看到就很难诊断......你在使用 SVG 吗？如果是这样，可能是您的<svg>标签缺少一个display:block？

更笼统地说：

构成可视化的 div —— 宽度小于页面宽度的 div —— 应该margin: 0 auto在其父元素中居中。更多信息在这里。