如何在 D3 中移动 SVG 的位置？答案

【问题标题】：How to move SVG's position in D3?如何在 D3 中移动 SVG 的位置？
【发布时间】：2015-01-30 08:57:48
【问题描述】：

我使用 D3 创建了一个 svg。但是，它只显示在屏幕的左上角，或者被附加到另一个 svg。无论如何我可以使用 JavaScript 移动它吗？例如：

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

【问题讨论】：

如果没有 css 或 js，你的 svg 将始终位于其容器的左上角。新 SO 用户的一些技巧：使用 jsfiddle.net

标签： javascript svg d3.js

【解决方案1】：

使用 d3js + Jquery：

// svg design
var svg = d3.select("#chart").append("svg")
    .attr("width", 200)
    .attr("height", 200);

// svg repositioning
$("svg").css({top: 200, left: 200, position:'absolute'});

或者

// svg align center
d3.select("#chart").attr("align","center"); //  thanks & +1 to chaitanya89

Live demo

【讨论】：

这个答案完美解决了我的问题。感谢您的提示！
@Photunix：请 +1 其他答案以及他们花时间尝试解决您的问题。也感谢您的验证，很高兴它有效！

【解决方案2】：

不要将 SVG 附加到正文，而是将其附加到像 <div> 这样的 html 元素并为其添加样式。

Javascript：

var svg = d3.select("#chart").append("svg")
.attr("width", 200)
.attr("height", 200);

HTML：将此添加到您的身体标签。

<div id="chart" align="center"></div>

如果您想使用 javascript 对齐 svg，请删除上述 <div> 标记中的 align 属性并在您的 javascript 中添加以下内容。

document.getElementById("chart").align = "center";

或者，您也可以使用 D3 来完成。

d3.select("#chart")
.attr("align","center");

【讨论】：

使用JS定位#chart，更适合问题。
我很确定提问者会忘记给我们 +1 =__=
感谢您的帮助。但是 Hugolpz 对我有一个更直观的答案。希望你不要介意。一旦我获得 15 声望，我会投票给你。

【解决方案3】：

在您需要附加任何 SVG 对象以在画布上应用过渡之前。

下面的教程一步一步地向您展示了 D3js 中的方法 Transition 的每个属性。

http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

享受吧！

【讨论】：

【解决方案4】：

在边距中使用负值。

margin = { 上：20，右：-600，下：20，左：640 }

内容默认添加在左侧。要向右移动，请使用负边距。以下行会将其带到屏幕的右后半部分。

【讨论】：