D3.js背景としてのカスタムSVG

Question

新しいSVGを宣言するのではなく、d3.jsの背景としてカスタムSVGを使用できるかどうか疑問に思っていますか？

ので、代わりのチャートを生成するために開始する前に、新しいSVGを宣言：

var svg = d3.selectAll('#my_div') 
      .append("svg") 
      .attr("width", 400) 
      .attr("height", 400) 
      .append("g"); 

は私の代わりに、カスタムSVGを追加でした。例えば、this？

私は私の新しいSVGにイメージを追加することでそれを丸めることができますが、私はそれを無効にすることができますか？

Answer 1

私はちょうどそれを選択し、既存のSVGを塗りつぶすために

d3.select("#my_div svg") 
    // do stuff 

Answer 2

...あなたはハードあなたが望むバックグラウンドでHTMLにSVGをコーディングして、D3にそのSVGを選択することができると思います：

var svg = d3.select("svg"); 

あなたの要素を描画するためにその選択を使用してください。ここで

はデモで、既存のSVGはスターで、円はD3コードによって追加されます。両方に

var svg = d3.select("svg"); 
 

 
var circles = svg.selectAll("foo") 
 
\t .data(d3.range(6)) 
 
\t .enter() 
 
\t .append("circle") 
 
\t .attr("cy", 100) 
 
\t .attr("cx", (d,i)=>i*30 + 20) 
 
\t .attr("r", 12) 
 
\t .attr("fill", "orangered") 
 
     .attr("stroke", "black");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg height="210" width="500"> 
 
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> 
 
</svg>