d3.js - d3.jsで、jQueryのように「メモリ内」に要素を作成します

Question

する代わりに

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

、ほとんどのd3.jsの例で行われているように、要素を作成したいのですが、すぐに本体などにアタッチしたくありません。

$('<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

カスタム 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%");