Utwórz element „w pamięci”, jak jQuery robi, w D3.js

Question

zamiast robić

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

, które większość d3.js przykłady nie chciałbym, aby utworzyć element, a nie przywiązują go do ciała lub czegokolwiek od razu.

Rodzaj podobny do $('<div/>') w jQuery.

Jak mogę to zrobić?

Answer 1

Utwórz element za pomocą document.createElement() i przekaż jak zwykle d3.

W konsoli:

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

Answer 2

Należy spróbować czegoś takiego:

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

// ... manipulate d3svg ... 

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

Nadzieję, że to pomaga.

Answer 3

Musiałem to zrobić w celu wspierania szerokości procentowe na moim niestandardowego elementu 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

Aby utworzyć element SVG "w pamięci" użytkowania document.createElementNS.

Zastosowanie 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); 

Dołącz wybór d3 do innego wyboru D3:

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