Question

All the examples我看过d3js.org，使用iframe将可视化顶部和中心定位在页面上。

当我尝试直接在页面上嵌入可视化文件而不使用iframe时，它会在所有其他页面元素下面的页面左下方显示。

除了使用iframe之外，任何人都知道任何有用的定位方法吗？

Answer 1

使用DIV。我就是做这个的。您可以看到此here -

的示例

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 - 宽度小于页面宽度的div - 应该有一个margin: 0 auto来将其置于其父元素中。 A bit more info here

没有iframe定位d3可视化的最佳方式？

3 个答案: