创建“内存”的元素，如jQuery呢，D3.js

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

我不得不这样做是为了支持我的自定义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

为“内存”创建SVG元素使用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(); }); 

的