d3.js - D3 svg插入问题

Question

我正在尝试使用 D3 将一段 HTML 插入现有的 SVG 并看到这篇文章https://gist.github.com/biovisualize/373c6216b5634327099a不幸的是，这种方法似乎在版本 5 中被贬低了。现在公认的最佳实践是什么将以下 HTML 添加到现有的 SVG 元素

 //select the relevant element in the DOM and add an SVG element to it
 var svg = d3.select("#chart-area").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.bottom + margin.top);

 //split the chart into left and right
 var gLeft = gWhole.append("g").attr("class","gLeft") 
 var gRight = gWhole.append("g").attr("class","gRight").attr("transform",`translate(${width/2+50},0)`).attr("fill","red");  

//need to append the following to gRight
<svg><g id="hideAC"><circle class="close" cx="10" cy="10" r="9.5"/><path 
class="close2" d="M10,1a9,9,0,1,1-9,9,9,9,0,0,1,9-9m0- 
1A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/><polygon class="cls-2" points="10 
11.18 6.11 14.6 5.31 12.94 8.66 10 5.31 7.06 6.11 5.41 10 8.82 13.89 5.41 
14.69 7.06 11.34 10 14.69 12.94 13.89 14.6 10 11.18"/><path 
d="M13.81,5.81,14.38,7l-3,2.62L11,10l.43.38,3,2.62-.57,1.19-3.48- 
3L10,10.85l-.33.29-3.48,3L5.62,13l3-2.62L9,10l-.43-.38L5.62,7l.57- 
1.19L9.67,8.86l.33.29.33-.29,3.48- 
3M14,5,10,8.49,6,5,5,7.12,8.28,10,5,12.88,6,15l4-3.49L14,15l1- 
2.12L11.72,10,15,7.12,14,5Z"/></g></svg>

标签： d3.jsdom