Thêm thuộc tính tiêu đề vào phần tử svg: g trong D3.js

Question

Tôi đang tạo ứng dụng có D3.js hiển thị dữ liệu trong bản đồ cây. Lý tưởng nhất là những gì tôi muốn là cung cấp cho cây-bản đồ một công cụ-tip để hiển thị thêm thông tin trên mỗi nút của bản đồ cây. Bản đồ cây được cấp dữ liệu từ tệp .JSON.

Tôi hiện đang làm việc với trình cắm thêm jquery Poshy Tip nơi tôi có thể chuyển thông tin này thông qua thuộc tính title=. Tôi biết tôi cần phải bằng cách nào đó thêm thuộc tính tiêu đề vào phần tử svg: g trong bản đồ cây nhưng tôi không thể tìm ra nơi tôi đặt mỗi nút tiêu đề attr.

Heres đầu kịch bản của tôi, nơi tôi làm cho tất cả các tờ khai của tôi vv ...

<div id="chart"></div> 
<script type="text/javascript"> 
var tree = d3.layout.tree() 
.size([h, w - 160]); 

var diagonal = d3.svg.diagonal() 
.projection(function(d) { return [d.y, d.x]; }); 

var vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h) 
.append("svg:g") 
.attr("transform", "translate(40,0)"); 

d3.json("test.json", function(json) { 
    json.x0 = 800; 
    json.y0 = 0; 
    update(root = json); 
}); 

Sau đây là cách tôi đang sử dụng poshytip() vào đầu

$(function(){ 
    $('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor', 
    showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom', 
    className: 'tip-twitter'}); 
} 

Khá nhiều Tôi chỉ muốn có thể "di chuyển" các mục riêng lẻ trong bản đồ cây tương tác và nhận chú giải công cụ để bật lên .. nhưng tôi không có bất kỳ may mắn nào. Làm cách nào tôi có thể đặt mỗi mục để có một Id cụ thể .. tôi có làm điều đó trong tệp .JSON không? Có cách nào dễ hơn để thực hiện việc này không? Tôi đang đi về điều này một cách sai lầm? Bất kỳ sự trợ giúp nào đều sẽ là tuyệt vời.

Answer 1

var vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h); 

var yourGElement = vis.append("svg:g").attr("transform", "translate(40,0)"); 

yourGElement.append("svg:title").text("Your tooltip info"); 

Answer 2

nodeEnter.append("svg:circle") 
     .attr("r", 1e-6) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
     .append("svg:title") 
      .text(function(d){return "Name:"+d.Name+"\nAge:"+d.age;}); 

SVG động thêm thuộc tính tiêu đề. Khi chúng tôi di chuyển chuột qua vòng tròn, nó sẽ hiển thị Tên, Tuổi trong cửa sổ bật lên nhỏ. Tên, tuổi phải được chỉ định trong test.json.