将SVG附加和嵌入HTML元素问题

Question

我目前正在为D3生成的图表创建工具提示。以下是简化为仅包含工具提示问题的代码段。如果您将工具提示设置为Div并通过D3将其附加到DOM，则可以选择它并附加一些文本，但是我似乎无法在其中插入新的SVG rect元素。 D3是否有用于此操作的特殊方法？

.chart{
    background-color: white;
}
.toolTip {
 position: absolute;
 height: 100px;
 width: 100px;
 background: #ffffff;
 border: 1px solid #6F257F;
 padding: 0.1rem;
 text-align: center;
 }


(function(){

var margin = {left:60,right:50,top:100,bottom:5}
var width = 500 -margin.right-margin.left;
 var height= 800 -margin.top-margin.bottom;

var svg = d3.select(".chart")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)

var g = d3.select(".chart").append("g")
.attr("transform",`translate(${margin.right},${margin.top}`)

 var tooltip = d3.select("body").append("div")
.attr("class", "toolTip").append("text").text("Tooltip");

 d3.select(".toolTip")
 .append("rect")
 .attr("x",10)
 .attr("y",10)
 .attr("width",10)
 .attr("height",100)
 .style("fill","red")

 })()