Question

民间 -

我一直在尝试根据Mike Bostock的“移动专利套装”添加工具提示

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

我将对象扩展为：

{来源：“诺基亚”，目标：“高通”，输入：“suit”}

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

将https://gist.github.com/milroc/2975255 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对象添加属性，并使用树形图将它们称为工具提示。我不确定我在这里需要做些什么。

谢谢，

拉尔夫

编辑：

（感谢Lars，首先！）

尝试添加第二组工具提示，但看起来对象“链接”而不是“节点”的结构使得对于是否滚动圆圈产生“源”的“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];
}}}

Answer 1

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

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

Answer 2

好人们我明白了：

我最终做的是添加两个属性：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; })
        )

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

2 个答案: