d3を使用してマークアップを生成しますが、DOMを操作しないでください。

Question

次のコードを与えると、bodyタグにsvg円を追加できます。

<svg><circle cx="30" cy="30" r="20"/></svg> 

、最終的にはページにレンダリングされるようにjavascriptの変数に代入：

d3.select("body") 
    .append("svg") 
    .append("circle") 
    .attr("cx", 30) 
    .attr("cy", 30) 
    .attr("r", 20); 

しかし、私はちょうどマークアップを生成するためにD3を使用したいと言います。この場合、私はd3にDOMを直接操作させたくありませんが、私はマークアップを生成するためにその魔法を使用したいと思います。

どうすればよいですか。

Answer 1

実際のDOMツリーの一部ではないメモリ内ツリーを作成するには、軽量のDocumentFragmentを使用できます。 DocumentFragmentインターフェイスはNodeインターフェイスを継承しているため、簡単にD3選択でラップして、新しい仮想ルートから開始する通常のD3操作を実行できます。終了すると、ルートノードのouterHTMLプロパティから所望のソース文字列を取得することができます。つまり、追加される文字は<svg>です。

// Create a document fragment in memory and wrap a D3 selection around it. 
 
var doc = d3.select(document.createDocumentFragment()); 
 

 
// Do your normal D3 stuff. 
 
var svg = doc.append("svg") 
 
svg.append("circle") 
 
    .attr("cx", 30) 
 
    .attr("cy", 30) 
 
    .attr("r", 20); 
 

 
// 1. Obtain your source string from the outerHTML property. 
 
var svgString = svg.node().outerHTML; 
 
console.dir(svgString); 
 

 
// 2. You can run a normal selection on the root 
 
// This variant does not even require keeping a 
 
// reference to the appended elements. 
 
svgString = doc.select("svg").node().outerHTML; 
 
console.dir(svgString);

<script src="https://d3js.org/d3.v4.js"></script>

注：私はちょうど実現したようIEはまだSVGコンテンツのinnerHTMLまたはouterHTMLプロパティをサポートしていないので、、一つの欠点は、しかし、そこにあります。したがって、IEをサポートする必要がある場合、このアプローチは実行可能なソリューションではありません。