Question

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

我目前正在使用jquery插件Poshy Tip，我可以通过title=属性传递此信息。我知道我需要以某种方式将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'});
}

我只是希望能够＆＃34; mouseover＆＃34;交互式树图中的各个项目并获得弹出的工具提示..但我没有运气。如何设置每个项目具有特定的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");

Answer 2

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中指定。

将标题属性添加到D3.js中的svg：g元素

2 个答案: