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

Question

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

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

Answer 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

现场演示

Answer 2

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

使用Javascript:

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

HTML:将其添加到您的body标签中.

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

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

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

或者,你也可以使用D3.

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