CODEWITHSUNDEEP
javascripthtmlsvgd3.js
user1701622
user1701622

Reputation: 195

Changing a Shapes position on the page D3/JS

<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
</head>
<body>

linked div to js

<div id="svgpathSVGdata"></div>

Start of the D3.js

<script type="text/javascript">


    var divElem = d3.select("#svgpathSVGdata");

Setting the canvas

    var svgcanvas = divElem.append("svg:svg")
        .attr("width", 800)
        .attr("height", 800);

At the moment it is upside down and I wish to also move it more centrally 

    svgcanvas.append("svg:path")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
</script>

</body>
</html>

Upvotes: 3

Views: 2698

Answers (1)

methodofaction
methodofaction

Reputation: 72405

You can apply a transform attribute to move your path and flip it the correct side:

var divElem = d3.select("#svgpathSVGdata");
var svgcanvas = divElem.append("svg:svg")
        .attr("width", 800)
        .attr("height", 800);
svgcanvas.append("svg:path")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .attr("transform", "translate(220,400) scale(1, -1)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");​

http://jsfiddle.net/QALqg/

Upvotes: 2

Related Questions