तत्व "स्मृति में" बनाएँ, jQuery की तरह, D3.js

Question

के बजाय

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

है, जो सबसे d3.js उदाहरण है, मैं एक तत्व बनाना चाहते हैं, और नहीं इसे संलग्न करने में शरीर या कुछ भी तुरंत करने के लिए।

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

मैं आदेश अपने कस्टम एसवीजी तत्व पर प्रतिशत चौड़ाई समर्थन करने के लिए में ऐसा करने के लिए किया था:

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

एक और डी 3 चयन करने के लिए एक d3 चयन जोड़ें:

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

की