Javascript 如何将foreignObject添加到d3圆？

我想在

d3圆圈内显示“complexe”
div
。据我所知，我不能在
svg
元素中添加
div
，除非我使用
foreignObject
元素

我能够在纯
d3svg
元素中添加
div
，但是我没有幸使用
d3circle
元素

这显示了一个圆圈元素和我试图做的事情。
假设您接受使用d3语法添加外来对象，此代码应该适合您的需要：

var ns = 'http://www.w3.org/TR/SVG11/';

var cont = d3.select("#container")
.append("svg")
.attr("xmlns",ns)
.attr("width", "400px")
.attr("height", "400px")
.attr("transform", "translate(100,100)")
;

var circle = cont.append("circle")
.attr("xmlns",ns)
.attr("id", "svg-div")
.attr("r","200")
.attr("fill", "red")
.attr("transform", "translate(200,200)")
;

var mainDiv = document.createElement('div');
mainDiv.innerHTML = 'Hello World';
mainDiv.style.background = "#000";
mainDiv.style.color = "#fff";
mainDiv.style.width = '50px';
mainDiv.style.height = '50px';

var numUsers = document.createElement("div");
numUsers.innerHTML = 5;
numUsers.style.display = 'inline';

var userIcon = document.createElement("img");
userIcon.src = "https://cdn1.iconfinder.com/data/icons/freeline/32/account_friend_human_man_member_person_profile_user_users-512.png";
userIcon.style.width = '12px';
userIcon.style.height = '12px';
userIcon.style.display = 'inline';

d3.select("svg").append("foreignObject")
            .attr("width", 100)
            .attr("height", 100)
            .attr("transform", "translate(200,200)")
            .append("xhtml:div")
            .html("5 ")
            .append('xhtml:img').attr('src','https://cdn1.iconfinder.com/data/icons/freeline/32/account_friend_human_man_member_person_profile_user_users-512.png')
            .attr("height","12px")
            .attr("width","12px");

var userDiv = document.createElement("div");
userDiv.appendChild(numUsers);
userDiv.appendChild(userIcon);

mainDiv.appendChild(userDiv);

var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 100);
foreignObject.setAttribute('width', 100);
foreignObject.appendChild( mainDiv ); 

var svg = document.querySelector( '#svg-div' );
svg.appendChild(foreignObject);

我刚刚更新了我的问题。你的答案仍然有效吗？我以前尝试过这种方法，但无法创建有效的HTML字符串来替换
.HTML（“Hello World”）
显然。我编辑了我的答案以跟随你的编辑，告诉我这是否是你想要的。受你答案的启发，我在foreignObject中创建了一个更复杂的示例。