將標題屬性添加到D3.js中的svg：g元素

我正在用D3.js構建一個應用程序，該應用程序在樹形圖中顯示數據。理想情況下，我希望給樹形圖一個工具提示，以在樹形圖的每個節點上顯示更多信息。樹圖是從.JSON文件中提供的數據。將標題屬性添加到D3.js中的svg：g元素

我目前正在使用jquery插件Poshy Tip，我可以通過title=屬性傳遞此信息。我知道我需要以某種方式將標題屬性添加到樹圖中的svg：g元素，但我無法弄清楚我設置每個節點標題attr的位置。

我的繼承人腳本的開始，我做我的所有聲明等..

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

這裏是我如何在頭使用poshytip()

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

差不多我只是想能夠將鼠標懸停在交互式樹形圖中的單個項目並獲得工具提示彈出窗口..但我沒有任何運氣。我怎樣才能設置每個項目有一個特定的ID ..我在.JSON文件中做到這一點？有沒有更簡單的方法來做到這一點？我以錯誤的方式處理這個問題嗎？任何幫助都會很棒。

來源

2012-07-12 accraze

實際繪製樹的代碼在哪裏？它將有一個選擇和一個數據選項。你應該能夠添加.attr（'title'，'我的標題'）。 – PhoebeB 2012-07-13 09:17:09

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

來源

2012-07-26 19:53:03 Elijah

但是請注意，這在更新情況下不起作用。如果您的代碼需要第二次使用新數據，則需要再次刪除並附加標題，或者僅更改其文本。 – hrabinowitz 2014-05-07 16:58:20

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動態追加title屬性。一旦我們將鼠標移到圓圈上，它就會彈出小小的名稱，年齡。姓名，年齡必須在test.json中指定。

來源

2013-08-22 04:11:00

將標題屬性添加到D3.js中的svg：g元素

回答

相關問題