CODEWITHSUNDEEP
javascriptd3.js
user1474218
user1474218

Reputation: 1195

Changing position of d3 svg box in browser window

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?

Upvotes: 3

Views: 3251

Answers (1)

user611478
user611478

Reputation: 445

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")

Upvotes: 6

Related Questions