javascript - How to create "svg" object without appending it?

Question

Consider the following code:

var svg = d3.select('#somediv').append("svg").attr("width", w).attr("height", h);

I would like to refactor this code so that it reads more like this:

var svg = makesvg(w, h);
d3.select("#somediv").append(svg);

Note that, in contrast to the situation shown in the first version, in this second version append does not create the "svg" object; it only appends it to d3.select("#somediv").

The problem is how to implement the function makesvg. This in turn reduces to the problem: how to instantiate an "svg" object without using append to do this, since one could then do something like:

function makesvg(width, height) {
  return _makesvg().attr("width", w).attr("height", h);
}

So my question boils down to what is the generic equivalent of the hypothetical _makesvg() factory mentioned above?

Answer 1

You can use the following:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Note the use of createElementNS. This is required because svg elements are not in the same XHTML namespace as most HTML elements.

This code creates a new svg element, as you would regardless of using D3 or not, and then creates a selection over that single element.

This can be made marginally more succinct but clearer and less error prone as:

var svg = document.createElementNS(d3.ns.prefix.svg, 'svg');