d3.js用一個外部對象代替circle

Question

我用這個有力的圖形佈局的例子來玩。 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(); 
     }); 

（g）包含svg外部對象的元素

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

圖形構建正確，但如果我嘗試e通過點擊一個節點來展開一個節點，看起來圖形沒有更新。所有舊節點都是重複的。

我做了一個其他小提琴你可以通過點擊一個節點來顯示這個問題。 http://jsfiddle.net/xkV4b/

沒有人知道我忘了什麼，或者是什麼問題？

非常感謝！

Answer 1

您的輸入追加應該可能匹配您在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。