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>