強制鏈接繪製在節點

我有一個D3樹圖強制鏈接繪製在節點

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

即在運行時創建（比其它實施例因此其有點不同）節點。我有顯示在node.on（「mouseover ...」）上的文本。問題是節點有時被鏈接重疊。現在，我知道，我應該能夠首先創建的鏈接來解決這個問題，並且節點之後，但後來我得到：

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

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

來源

2014-07-14 user235236

美麗的工作，和...爲什麼不顯示文本，而不是僅僅添加一個像10這樣的值到d.x和d.y，這不會使鏈接重疊到節點。 – nsthethunderbolt

感謝您的讚美，但我在談論節點之間的實際橙色線條，而不是文字;可能會有一些混亂。除非，你在談論橙色線？ – user235236

我不知道你是否看到過這個... http://jsfiddle.net/MUSKE/14/類型與你的問題有關，而且是來自post的解決方案http://stackoverflow.com/questions/ 21304427/d3-force-layout-links-and-nodes-z-index – nsthethunderbolt

想通了這個問題，不知道究竟爲什麼，但改變

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

到

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

修復了這個問題

來源

2014-07-14 20:09:57 user235236

強制鏈接繪製在節點

回答

相關問題