Changing position of d3 svg box in browser window

Question

I have a form that, when submit is clicked, generates an svg using d3 (after deleting the old svg already present). How can I make it so that the svg is on the upper left portion of the browser window, and not underneath the form? Here's the code that deletes then generates a new svg on each submit. ``` //(form) //(function call on form submit) d3.select("#thesvg").remove(); var svg = d3.select("body") .append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .attr("id", "thesvg") .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); ``` w, h and m are width, height and margins, respectively. I think I might have to use some sort of style tag, but I couldn't find any style information in the d3 wiki on github. More generally, is there more d3 information that's geared a bit towards graphics-newbies?

Accepted Answer

```
d3.select("body").append("svg:svg")
```

This selects the body and appends the svg to the end so it appears at the end of the content.

If you replace "body" with an id of say a div element it will append the svg to that div. The div can then be placed where you want.

```
d3.select("#id").append("svg:svg")
```

Changing position of d3 svg box in browser window

Solution

Problem