Javascript d3.js将圆替换为外来对象

我使用了这个力定向图布局的示例。 www.bl.ocks.org/GerHobbelt/3071239

或者直接操纵，这里用小提琴，

我想要的是替换圆元素

  node = nodeg.selectAll("circle.node").data(net.nodes, nodeid);
  node.exit().remove();

  node.enter().append("circle")
      .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
      .attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .style("fill", function(d) { return fill(d.group); })
      .on("click", function(d) {
        console.log("node click", d, arguments, this, expand[d.group]);
        expand[d.group] = !expand[d.group];
    init();
      });

使用包含svg foreignObject的group（g）元素

node = nodeg.selectAll("g.node").data(net.nodes, nodeid);
node.exit().remove();

var nodeEnter = node.enter().append("foreignObject")
//simplified for this demo
        .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
        .attr('width', '22px')
        .attr('height', '22px')
        .attr('x', -11)
        .attr('y', -11)
        .append('xhtml:div')
            .style("background",function(d){return fill(d.group)})
            .style("width","20px")
            .style("height","20px")
            .style("padding","2px")
       .on("click", function(d) {
       console.log("node click", d, arguments, this, expand[d.group]);
       expand[d.group] = !expand[d.group];
       init();
       });

该图的构建是正确的，但是如果我试图通过单击某个节点来展开该节点，则该图似乎没有更新。以便复制所有旧节点

我做了另一把小提琴，你可以通过点击一个节点来显示这个问题。

有人知道我忘记了什么，或者是什么问题吗

---

多谢各位

您的enter-append可能与您在nodeg上的选择相匹配。但即便如此，d3在选择“外来对象”方面似乎也有一些困难。这可能是一个问题，可能是一个bug

不过，您可以通过选择类来绕过它。我将代码更新为：

node = nodeg.selectAll(".fo-node").data(net.nodes, nodeid);
node.exit().remove();

var nodeEnter = node.enter().append("foreignObject")
    .attr("class", function(d) { return "fo-node node" + (d.size?"":" leaf"); })
    .attr('width', '22px')
    ...

---

似乎是这样。

您的enter append可能与您在nodeg上的选择相匹配。但即便如此，d3在选择“外来对象”方面似乎也有一些困难。这可能是一个问题，可能是一个bug

不过，您可以通过选择类来绕过它。我将代码更新为：

node = nodeg.selectAll(".fo-node").data(net.nodes, nodeid);
node.exit().remove();

var nodeEnter = node.enter().append("foreignObject")
    .attr("class", function(d) { return "fo-node node" + (d.size?"":" leaf"); })
    .attr('width', '22px')
    ...

这似乎有点奇怪