D3.js

Question

代わりの最もd3.js例は、私が要素を作成したいし、それを添付しないと思います

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

を行う際に、「メモリ内」要素を作成します。体や何かにすぐに。

種類がjQueryのような$('<div/>')です。

どうすればいいですか？

Answer 1

document.createElement()を使用して要素を作成し、通常通りd3に渡します。コンソールで

：

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

// ... manipulate d3svg ... 

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

はそれが役に立てば幸い：

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

Answer 2

あなたが好きなものを試してみてください。

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

document.createElementNSを使用する「メモリ内の」SVG要素を作成します。 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(); }); 

の