D3 Phụ thêm HTML vào các nút

Question

Tôi đã tìm câu trả lời cho câu hỏi này nhưng không có câu hỏi nào tương tự giúp tôi trong tình huống của mình. Tôi có một cây D3 tạo ra các nút mới khi chạy. Tôi muốn thêm HTML (vì vậy tôi có thể định dạng) cho một nút khi tôi di chuột qua nút cụ thể đó. Ngay bây giờ tôi có thể thêm HTML nhưng không định dạng của nó. Hãy giúp tôi!

JSFiddle: http://jsfiddle.net/Srx7z/

JS Mã số:

var width = 960, 
      height = 500; 

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

    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(-30,40)"); 

    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. 
     var gelement = node.enter().append("g"); 

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

     // 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}); 
       }) 
       .attr('pointer-events', 'none'); 

     node.on("mouseover", function (d) { 
      var g = d3.select(this); 
      g.append("text").html('First Line <br> Second Line') 
      .classed('info', true) 
      .attr("x", function (d) { 
       return (d.x+20); 
      }) 
      .attr("y", function (d) { 
       return (d.y); 
      }) 
      .attr('pointer-events', 'none'); 


     }); 

     node.on("mouseout", function (d) { 
      d3.select(this).select('text.info').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

Sử dụng hướng tuyệt vời Lars Kotthoff, tôi đã nhận nó làm việc vì vậy tôi quyết định gửi nó cho người khác và tài liệu tham khảo của riêng tôi:

http://jsfiddle.net/FV4rL/2/

với mã sau được nối thêm:

node.on("mouseover", function (d) { 
      var g = d3.select(this); // The node 
      var div = d3.select("body").append("div") 
        .attr('pointer-events', 'none') 
        .attr("class", "tooltip") 
        .style("opacity", 1) 
        .html("FIRST LINE <br> SECOND LINE") 
        .style("left", (d.x + 50 + "px")) 
        .style("top", (d.y +"px")); 
});