0

伙计们-

我一直在尝试向基于 Mike Bostock 的“Mobile Patent Suits”的可视化添加工具提示

http://bl.ocks.org/mbostock/1153292

我扩展了对象：

{来源：“诺基亚”，目标：“高通”，类型：“套装”}

{来源：“诺基亚”，目标：“高通”，类型：“西装”，工具提示：“我的评论”}

在脚本中添加了https://gist.github.com/milroc/2975255 d3 helper tooltip 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 对象，并将它们称为工具提示，并带有树形图。我不确定我需要在这里做些什么不同的事情。

谢谢，

拉尔夫

编辑：

（首先感谢拉斯！）

尝试添加第二组工具提示，但它似乎是对象“链接”而不是“节点”的结构，这使得滚动一个圆圈是否会产生“源”或“目标”的“nameLabel”工具提示'

扩展对象：

{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];
}}}
4

2 回答 2

0

您还需要在计算节点时添加该属性。假设您使用的代码与您链接到的示例中的代码相同，则需要更改

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

到

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, tooltip: link.tooltip});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, tooltip: link.tooltip});
});
于 2013-04-23T17:26:58.633 回答
0

好吧，伙计们，我想通了：

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

{source: "Forms", target: "AO/TOA", type: "dependency", tooltip: "Forms tooltip here", sourceTip: "Forms tip", destTip: "AO/TOA tip"},

然后我创建了节点：

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

唯一的技巧是我将属性“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; })
        )
于 2013-05-16T20:11:06.990 回答