Javascript 向 D3.js 中的 svg:g 元素添加标题属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11462029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a title attribute to svg:g element in D3.js
提问by accraze
I'm building an app with D3.js that displays a data in a tree-map. Ideally what I would like to is give the tree-map a tool-tip to display more info on each node of the tree-map. The tree-map is fed data from a .JSON file.
我正在使用 D3.js 构建一个应用程序，该应用程序在树图中显示数据。理想情况下，我想要的是给树图一个工具提示，以在树图的每个节点上显示更多信息。树状图从 .JSON 文件中获取数据。
I am currently working with the jquery plug-in Poshy Tipwhere I can pass this info through the title=attribute. I know I need to somehow add the title attribute to the svg:g element in the tree-map but I can't figure out where I set each nodes title attr.
我目前正在使用 jquery 插件Poshy Tip，我可以在其中通过title=属性传递此信息。我知道我需要以某种方式将标题属性添加到树图中的 svg:g 元素，但我不知道在哪里设置每个节点的标题属性。
Heres the beginning of my script where I make all my declarations etc...
这是我的脚本的开头，我在其中进行了所有声明等...
<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);
});
Here is how I am using poshytip()in the head
这是我poshytip()在头部使用的方式
$(function(){
$('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor',
showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom',
className: 'tip-twitter'});
}
Pretty much I just want to be able to "mouseover" the individual items in the interactive tree-map and get a tooltip to pop-up.. but i havent had any luck. How can I set each item to have a specific Id.. do I do that in the .JSON file? Is there an easier way to do this? Am I going about this in the wrong manner? Any help would be great.
几乎我只想能够“鼠标悬停”交互式树图中的单个项目并获得弹出的工具提示..但我没有任何运气。如何将每个项目设置为具有特定的 Id.. 我在 .JSON 文件中这样做吗？有没有更简单的方法来做到这一点？我是否以错误的方式解决这个问题？任何帮助都会很棒。
回答by Elijah
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");
回答by Aravind Cheekkallur
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;});
SVGdynamically append title attribute. Once we move mouse over the circle it shows the Name, Age in small pop up. Name, age must be specified in test.json.
SVG动态附加标题属性。一旦我们将鼠标移到圆圈上，它就会在小弹出窗口中显示姓名、年龄。姓名、年龄必须在test.json.
