Translate it to another position using d3

Question

I want to translate the svg from (0,0) (initial position) to position say(500,50). For this I am using the below code but it is not working.Please suggest me some idea.

var svg = d3.select("body")
        .append("svg:svg")
        .attr("width", 600)
        .attr("height", 600)
        .append("g")
        .attr("transform","translate(500,50)");

Answer 1

Your code is setting the transform attribute on the g element. Thus, the g element will be translated inside the svg element. If you intended to translate the svg element then set the style attribute on the svg element with the desired transform. Remember to include the units on the translate distances. For example...

var svg = d3.select("body")
.append("svg:svg")
.attr("width", 600)
.attr("height", 600)
.attr("style", "transform: translate(500px,50px)")
.append("g")