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

Live demo

Answer 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，请删除上述align标记中的<div>属性，并在您的javascript中添加以下内容。

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

或者，您也可以使用D3。

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

Answer 3

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

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

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

享受！

Answer 4

在边距中使用负值。

margin = {顶部：20，右侧：-600，底部：20，左侧：640}

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

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

4 个答案: