CODEWITHSUNDEEP
javascriptsvgd3.js
Photunix
Photunix

Reputation: 227

How to move SVG's position in D3?

I created a svg using D3. However, it only shows up on the upper left conner of the screen, or been appended to another svg. Are there anyway I can move it using JavaScript? For example:

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

Upvotes: 13

Views: 37140

Answers (4)

Vishnu Prasanth
Vishnu Prasanth

Reputation: 179

Use negative value in margin.

margin = { top: 20, right: -600, bottom: 20, left: 640 }

The content is added on the left by default. To shift to right, use negative margins. following line will take it to the second right half of the screen.

Upvotes: 0

Hugolpz
Hugolpz

Reputation: 18248

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

Or

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

Live demo

Upvotes: 14

chaitanya89
chaitanya89

Reputation: 847

Instead of appending SVG to the body, append it to a html element like <div> and add style to it.

Javascript:

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

HTML: add this to your body tag.

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

If you want to align svg using javascript, remove align attribute in the above <div> tag and add the following in your javascript.

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

Alternatively, You could also do it using D3.

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

Upvotes: 9

Fernando Santucci
Fernando Santucci

Reputation: 470

Before you need append any SVG object to apply the transition on canvas.

The tutorial step-by-step below show you, in practice, each property of method Transition from D3js.

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

Enjoy!

Upvotes: 3

Related Questions