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

Question

而不是做

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

，大多数 d3.js 示例都这样做，我想创建一个元素，而不是立即将它附加到 body 或任何东西上。

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

我怎样才能做到这一点？

Answer 1

使用document.createElement()创建元素并d3像往常一样传递给它。

在控制台中：

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

Answer 2

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

如果你只想要节点......

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

Answer 3

要“在内存中”创建 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(); });

Answer 4

您应该尝试以下方法：

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

// ... manipulate d3svg ...

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

希望能帮助到你。

Answer 5

为了支持自定义 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%");