Comment déplacer la position de SVG dans D3?

J'ai créé un svg en utilisant D3. Cependant, il apparaît uniquement sur le coin supérieur gauche de l'écran, ou a été ajouté à un autre svg. Est-ce que de toute façon je peux le déplacer en utilisant JavaScript? Par exemple:

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

Utilisation de 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'}); 

Ou

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

Démo en direct

Au lieu d'ajouter SVG au corps, ajoutez-le à un élément html comme <div> et ajoutez du style à celui-ci.

Javascript:

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

HTML: ajoutez ceci à votre étiquette de corps.

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

Si vous souhaitez aligner svg à l'aide de javascript, supprimez l'attribut d' align dans la <div> ci-dessus et ajoutez ce qui suit dans votre javascript.

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

Alternativement, vous pouvez également le faire en utilisant D3.

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

Avant d'avoir besoin d'ajouter un objet SVG pour appliquer la transition sur un canevas.

Le tutoriel étape par étape ci-dessous vous montre, en pratique, chaque propriété de la méthode Transition from D3js.

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

Prendre plaisir!