Crea elemento "in memoria", come jQuery fa, in d3.js

Question

Invece di fare

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

, che la maggior parte d3.js esempi non, mi piacerebbe creare un elemento, e NON collegarlo al corpo o qualcosa subito.

Un po 'come $('<div/>') in jQuery.

Come posso fare questo?

Answer 1

Creare l'elemento utilizzando document.createElement() e passarlo a d3 come al solito.

In console:

> a = document.createElement("div") 
<div>​</div>​ 
> d3.select(a).append("svg") 
[Array[1]] 
> a 
<div>​ 
<svg>​</svg>​ 
</div>​ 

Answer 2

Si dovrebbe provare qualcosa di simile:

var $svg = $('<svg/>'); 
var d3svg = d3.select($svg[0]); 

// ... manipulate d3svg ... 

$('body').append($svg) 

Speranza che aiuta.

Answer 3

ho dovuto fare questo al fine di supportare larghezze percentuali sulla mia abitudine elemento SVG:

var svgDom = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
svgDom.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 
svg = d3.select(svgDom) 
    .attr("class", "chart") 
    .attr("width", "100%") 
    .attr("height", "100%"); 

Answer 4

Per creare l'elemento SVG "in memoria" usare document.createElementNS.

L'utilizzo di document.createElementNS:

// Create the svg elem 
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 

// Create a g elem 
var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); 

// Create a d3 Selection with the elem 
var d3Svg = d3.select(svg); 
var d3g = d3.select(g); 

Appendi una selezione d3 ad un'altra selezione d3:

d3Svg.append(function(){ return d3g.node(); });