javascript - 给 svg :g element in D3. js 添加一个 title 属性

Question

我正在使用 D3.js 构建一个在 TreeMap 中显示数据的应用程序。理想情况下，我想要的是为 TreeMap 提供一个工具提示，以在 TreeMap 的每个节点上显示更多信息。树形图从 .JSON 文件中获取数据。

我目前正在使用 jquery 插件 Poshy Tip，我可以在其中通过 title= 属性传递此信息。我知道我需要以某种方式将 title 属性添加到 TreeMap 中的 svg:g 元素，但我不知道在哪里设置每个节点的 title 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 文件中执行此操作？有没有更简单的方法来做到这一点？我会以错误的方式解决这个问题吗？任何帮助都会很棒。

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