D3.js 工具提示的d3js强制扩展对象

乡亲们-

我一直在尝试根据迈克·博斯托克的“移动专利诉讼”为viz添加工具提示

我将对象从以下位置扩展：

{来源：“诺基亚”，目标：“高通”，键入：“西装”}

到 {来源：“诺基亚”，目标：“高通”，键入：“西装”，工具提示：“我的评论在这里”}

在脚本中添加了d3助手工具提示JS

已创建工具提示对象：

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "70")
.style("visibility", "hidden");

并称之为：

var circle = svg.append("svg:g").selectAll("circle")
  .data(force.nodes())
  .enter().append("svg:circle")
  .call(d3.helper.tooltip(function(d,i){return d.name;}))
  .attr("r", 6)
  .call(force.drag);

这很好，但如果我将其更改为：

  .call(d3.helper.tooltip(function(d,i){return d.tooltip;}))

我得到“未定义”。我以前曾设法通过树形图将属性添加到d3对象，并将它们称为工具提示。我不确定我需要在这里做些什么

谢谢

拉尔夫

编辑：

（首先感谢拉尔斯！）

试图添加第二组工具提示，但似乎是对象“链接”而不是“节点”的结构，这使得在圆上滚动是否会产生“源”或“目标”的“名称标签”工具提示成为一个难题

扩展对象：

{source: "First", target: "Second", type: "dependency", tooltip: "tip for rollover of path", nameLabel: "tip for rollover of circle"}

工作路径工具提示：

var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
.call(d3.helper.tooltip(function(d,i){return d.tooltip;}));

危险圆工具提示：

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.call(d3.helper.tooltip(function(d,i){return d.nameLabel;}))
.attr("r", 12)
.call(force.drag);

现在，工具提示确实可以识别圆，因为这样可以：

.call(d3.helper.tooltip(function(d,i){return d.name;}))

因此，我构建了一个函数，我想我可以将名称传递给：

function whatTip(theName) {
var fullArray = new Array;
var fullArray = (("FIRST","first tooltip"),("SECOND","second tooltip"),("THIRD","THIRD tooltip"),("FIFTH","FIFTH tooltip"),("SIXTH","sixth tooltip"),("FOURTH","FOURTH tooltip") );
for(var i=0;i<fullArray.length;i++){
if (fullArray[i][0] == theName) {
return fullArray[i][1];
}}}

函数whatTip（名称）{
var fullArray=新数组；
var fullArray=（“第一”、“第一个工具提示”）、（“第二”、“第二个工具提示”）、（“第三”、“第三个工具提示”）、（“第五”、“第五个工具提示”）、（“第六”、“第六个工具提示”）、（“第四”、“第四个工具提示”）；
对于（var i=0；i，在计算节点时也需要添加属性。假设您使用的代码与链接到的示例中的代码相同，则需要进行更改

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

到

伙计们，我想起来了：

最后我添加了两个属性：sourceTip和destTip（因为有些节点只是目的地）

然后我创建了节点：

var mylinks = links.forEach(function(link){
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, tooltip: link.tooltip, nameTip: link.sourceTip});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, tooltip: link.tooltip, nameTip: link.destTip});
});

唯一的技巧是，我分别为source和target将属性“nameTip”设置为sourceTip/destTip

这意味着我可以使用nameTip属性从工具提示调用它：

.append("svg:circle")
         .call(d3.helper.tooltip()
            .attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .style({color: '#a1d373'})
            .text(function(d, i){ return d.nameTip; })
        )

我现在尝试将一种类型的工具提示与“路径”关联，将另一种类型的工具提示与“圆”关联。使用d.name调用工具提示可成功生成圆的名称，但我需要一个单独的文本字符串。我已将另一个对象添加到链接对象“circleTip”中，但当将其作为鼠标悬停事件添加时，它与链接关联，而不是与圆圈关联。我想这是由于对象的创建方式。我想我需要编辑工具提示帮助程序或使用其他方法？这一切都取决于鼠标悬停处理程序--在附加到路径的处理程序中，使用路径工具提示，并在附加到圆后，使用圆工具提示。我如何将工具提示（“名称标签”）与圆关联？似乎我正在此处创建链接：
code
links.forEach（函数（link）{
code
link.source=节点[link.source]|（节点[link.source]={name:link.source，工具提示：link.tooltip，名称标签：link.namelab}）)
code
link.target=节点[link.target]|（节点[link.target]={name:link.target，工具提示：link.tooltip，namelab:link.namelab}）；
code
}）；但节点似乎是从链接创建的。因此，当我将鼠标悬停在一个圆圈上时，会得到一个与链接关联的工具提示。这段代码是您组装数据结构的地方。创建DOM元素时，您会附加鼠标处理程序。因此，在创建相应的DOM元素时，您需要选择正确的工具提示。我得到hat-但DOM元素是链接，而不是圆。因此，当我将鼠标移到链接上时，效果非常好，因为它知道我正在与链接交谈。但是，当我将鼠标移到圆上时，它可能是一个链接的源，也可能是另一个链接的目标。根据最后创建的链接，将鼠标移到给定的圆上会产生“名称标签”与源或目标关联的。
var mylinks = links.forEach(function(link){
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, tooltip: link.tooltip, nameTip: link.sourceTip});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, tooltip: link.tooltip, nameTip: link.destTip});
});

.append("svg:circle")
         .call(d3.helper.tooltip()
            .attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .style({color: '#a1d373'})
            .text(function(d, i){ return d.nameTip; })
        )