将标题属性添加到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元素

回答

相关问题