11

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

我目前正在使用 jquery 插件，我可以在其中通过属性Poshy Tip传递此信息。title=我知道我需要以某种方式将标题属性添加到树图中的 svg:g 元素，但我无法弄清楚我在哪里设置每个节点的标题属性。

这是我的脚本的开头，我在其中进行所有声明等......

<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 文件中执行此操作吗？有没有更简单的方法来做到这一点？我是否以错误的方式处理这件事？任何帮助都会很棒。

4

2 回答 2

18 
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-26T19:53:03.580 回答
5 
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动态附加标题属性。一旦我们将鼠标移到圆圈上，它就会在小弹出窗口中显示名称、年龄。姓名、年龄必须在 中指定test.json。

于 2013-08-22T04:11:00.130 回答