Javascript 用包含自定义HTML和ko绑定的foreignObject替换d3演示中的圆圈和文本

鉴于它是的精确副本，我想用包含一些自定义HTML的foreignObject元素替换SVG中的圆圈和文本元素

我可以使用以下代码手动添加一个：

var newFO = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
$('svg').append(newFO);
$(newFO).append("<div class='test'>" + strNameVar + "</div>");

更新：

---

是我见过的最接近的，但它将转换应用于div而不是父foreignObject。

您可以通过先添加

g

元素，然后再添加下面的

foreignObject

元素来实现这一点。像这样（轻微滥用选择器）：

完整的例子

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function (d) { return d.name; });

var node = svg.selectAll("foreignObject")
    .data(force.nodes())
  .enter().append("g");
node.append("foreignObject")
    // etc