在D3.js中创建“在内存中”的元素，就像jQuery一样

Question

而不是做

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

，大多数d3.js的例子，我想创建一个元素，而不是立即将它附加到正文或任何东西。

有点像jQuery中的$('<div/>')。

我该怎么做？

Answer 1

使用document.createElement()创建元素并照常将其传递给d3。

在控制台中：

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

Answer 2

你应该尝试类似的东西：

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

// ... manipulate d3svg ...

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

希望它有所帮助。

Answer 3

// create selection containing unattached div node    
var sel = d3.create('svg');  

如果只需要节点...

// retrieve unattached node
var node = d3.create('svg').node();

Answer 4

我必须这样做才能支持自定义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 5

在内存中创建svg元素＆＃34;＆＃34;使用document.createElementNS。

使用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);

将d3选择附加到另一个d3选择：

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