d3.js заменить круг с foreignObject

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 foreignObject

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

График построен правильно, но если я попытаюсь xpand узел, щелкнув его, кажется, что график не обновляется. Так что все старые узлы дублируются.

Я создаю другую скрипту, где вы можете показать эту проблему, щелкнув узел. http://jsfiddle.net/xkV4b/

Кто-нибудь знает, что я забыл, или в чем проблема?

спасибо!

Answer 1

Ваш вход для добавления, вероятно, должен соответствовать вашему выбору на нодеге. Но даже тогда кажется, что у 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.