javascript - d3.js用foreignObject替换圆

我玩了一个力导向图布局的例子。
www.bl.ocks.org/GerHobbelt/3071239

或直接用小提琴来操纵
http://jsfiddle.net/BeSAb/

我想要的是替换圆形元素

  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的组（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();
       });

该图是正确构建的，但是如果我尝试通过单击它来扩展节点，则该图似乎没有更新。这样所有旧节点都被复制。

我做了另一个小提琴，您可以在其中单击一个节点来显示此问题。
http://jsfiddle.net/xkV4b/

有谁知道我忘记了什么，或者问题是什么？

非常感谢你！

最佳答案

您输入的内容可能应该与您在nodeg上的选择匹配。但是即使那样，似乎d3在选择“ foreignObject”东西时还是有些麻烦。这可能是提起d3 google group的问题/问题-可能是错误。

但是，您可以通过选择班级来解决它。我将代码更新为：

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')
    ...

似乎work。