Obliger dessiner Sous nœuds

Question

J'ai un graphique d'arbre D3

http://jsfiddle.net/bGR8N/9/ 

qui crée des noeuds lors de l'exécution (de sorte que son un peu différent que les autres exemples). J'ai du texte qui s'affiche sur un node.on ("mouseover ..."). Le problème est que les nœuds sont parfois chevauchés par les liens. Maintenant, je sais que je devrais être en mesure de résoudre ce problème en créant les liens d'abord et les noeuds après, mais je reçois:

Error: Invalid value for <path> attribute d="M,C,NaN ,NaN ," 

code Javascript:

var width = 960, 
     height = 500; 

var tree = d3.layout.tree() 
     .size([width - 20, height - 20]); 

var root = {}, 
     nodes = tree(root); 

root.parent = root; 
root.px = root.x; 
root.py = root.y; 

var diagonal = d3.svg.diagonal(); 

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(10,10)"); 

var node = svg.selectAll(".node"), 
     link = svg.selectAll(".link"); 

var duration = 750; 

$("#submit_button").click(function() { 
    update(); 
}); 
    function update() { 
     if (nodes.length >= 500) return clearInterval(timer); 

     // Add a new node to a random parent. 
     var n = {id: nodes.length}, 
       p = nodes[Math.random() * nodes.length | 0]; 
     if (p.children) p.children.push(n); else p.children = [n]; 
     nodes.push(n); 

     // Recompute the layout and data join. 
     node = node.data(tree.nodes(root), function (d) { 
      return d.id; 
     }); 
     link = link.data(tree.links(nodes), function (d) { 
      return d.source.id + "-" + d.target.id; 
     }); 

     // Add entering nodes in the parent’s old position. 

     // Add entering links in the parent’s old position. 
     link.enter().insert("path", ".g.node") 
       .attr("class", "link") 
       .attr("d", function (d) { 
        var o = {x: d.source.px, y: d.source.py}; 
        return diagonal({source: o, target: o}); 
       }); 

        var gelement = node.enter().append("g"); 

     gelement.append("circle") 
       .attr("class", "node") 
       .attr("r", 10) 
       .attr("cx", function (d) { 
        return d.parent.px; 
       }) 
       .attr("cy", function (d) { 
        return d.parent.py; 
       }); 

     node.on("mouseover", function (d) { 
      var g = d3.select(this); // The node 
      // The class is used to remove the additional text later 
      //debugger; 
      var info = g.insert('text') 
        .attr("x", function (d) { 
         //return (d.parent.px); 
         return (d.x + 10); 
        }) 
        .attr("y", function (d) { 
         //return (d.parent.py); 
         return (d.y + 10); 
        }) 
        .text(function (d) { 
         return "Info on FOO"; 
        }); 

      console.log("FOO"); 

     }); 

     node.on("mouseout", function (d) { 
      d3.select(this).select('text').remove(); 

     }); 


     // Transition nodes and links to their new positions. 
     var t = svg.transition() 
       .duration(duration); 

     t.selectAll(".link") 
       .attr("d", diagonal); 

     t.selectAll(".node") 
       .attr("cx", function (d) { 
        return d.px = d.x; 
       }) 
       .attr("cy", function (d) { 
        return d.py = d.y; 
       }); 
    } 

Answer 1

cernées le problème, pas sûr exactement pourquoi, mais en changeant

link.enter().insert("path", ".g.node") 

à

link.enter().insert("path", "g") 

a corrigé le problème