D3.js自定義SVG作爲背景

Question

我想知道是否可以將自定義SVG作爲背景添加到d3.js而不是聲明新的背景？

因此，而不是開始生成圖表之前，宣佈了新的SVG的：

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

我能代替，添加自定義SVG。如this？

我知道我可以通過將圖像添加到我的新svg來解決它，但我想知道是否可以覆蓋它？

Answer 1

我猜你會很難在你想要的，然後在D3選擇SVG背景HTML代碼中的SVG ...

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

Answer 2

畫了一個存在的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>