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

Question

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

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

Answer 1

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

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

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

尽情享受吧！

Answer 2

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

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.[=17= 中添加以下内容]

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

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

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

Answer 3

使用 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

Answer 4

在保证金中使用负值。

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

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

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

How to move SVG's position in D3?

javascript

svg

d3.js