在浏览器窗口中更改 d3 svg 框的位置答案

【问题标题】：Changing position of d3 svg box in browser window在浏览器窗口中更改 d3 svg 框的位置
【发布时间】：2012-06-22 08:27:26
【问题描述】：

我有一个表单，当单击提交时，会使用 d3 生成一个 svg（在删除已经存在的旧 svg 之后）。如何使 svg 位于浏览器窗口的左上角，而不是在表单下方？这是删除然后在每次提交时生成一个新 svg 的代码。

//(form)
//(function call on form submit)

d3.select("#thesvg").remove();
var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .attr("id", "thesvg")
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

w、h 和 m 分别是宽度、高度和边距。

我想我可能不得不使用某种样式标签，但我在 github 上的 d3 wiki 中找不到任何样式信息。更一般地说，是否有更多面向图形新手的 d3 信息？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

d3.select("body").append("svg:svg")

这会选择正文并将 svg 附加到末尾，使其出现在内容的末尾。

如果您将“body”替换为 div 元素的 id，它会将 svg 附加到该 div。然后可以将 div 放置在您想要的位置。

d3.select("#id").append("svg:svg")

【讨论】：

谢谢！效果很好！我没有 100% 理解“身体”部分的含义，我主要是在复制它。我认为这意味着页面上有更大的空间。我在顶部放了一个 div 并将其连接到它，效果很好。