d3工具提示中的第一个节点邻居

Question

如何通过d3提示显示所选（并且我的意思是盘旋在节点上）的第一度邻居？

这里是我的d3.tip部分

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .html(function(d) {return [name of neighbors];}); 

我怎么会改变后续帮我通过我的小费返回文本，而不是改变透明度？

var linkedByIndex = {}; 
var toggle = 0; 
for (i = 0; i < nodes.length; i++) { 
    linkedByIndex[i + "," + i] = 1; 
}; 
links.forEach(function (d) { 
    linkedByIndex[d.source.index + "," + d.target.index] = 1; 
}); 

//This function looks up whether a pair are neighbours 
function neighboring(a, b) { 
    return linkedByIndex[a.index + "," + b.index]; 
} 

function connectedNodes() { 

    if (toggle == 0) { 
     //Reduce the opacity of all but the neighbouring nodes 
     d = d3.select(this).node().__data__; 
     circle.style("opacity", function (o) { 
      return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1; 
     }); 

     path.style("opacity", function (o) { 
      return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1; 
     }); 

     //Reduce the op 

     toggle = 1; 
    } else { 
     //Put them back to opacity=1 
     circle.style("opacity", 1); 
     path.style("opacity", 1); 
     toggle = 0; 
    }} 

Answer 1

下面是我将如何使用不同的力导向图（应该很容易实现你的）。

我会在第一次运行脚本时运行connectedNodes函数，但不是改变不透明度，而是将邻居添加到数组，然后将数组附加到每个节点上的数据。

下面是与显示的所有节点（node.name）工具提示（鼠标悬停）一拨弄它连接到：http://jsfiddle.net/reko91/jz2AU/125/

运行函数创建节点后：

node.each(function(d) { 
    //console.log(d) 
    connectedNodes1(this) 
}) 

这里的变更后的功能：

function connectedNodes1(thisNode) { 

    d = d3.select(thisNode).node().__data__; 

    var neighbours = []; 
    node.each(function(o) { 

    // console.log(o) 
    if (neighboring(d, o) | neighboring(o, d)) { 
     neighbours.push(o.name) //push into array 
    } 

    }); 
    d3.select(thisNode).node().__data__.neighboursString =""; //set the attribute to nothing 

    for (i = 0; i < neighbours.length; i++) { //go through each element in the array to create one string 
    var thisString = neighbours[i] + ' | '; //add a split so it can be easily read 
    d3.select(thisNode).node().__data__.neighboursString += (thisString); //concat to attribute 
    } 
    d3.select(thisNode).node().__data__.neighbours = neighbours; //set neighbours to neighbours array above if you want to use any of the nodes later 
} 

通知我做了两个属性：neighboursString和neighbours。

- neighboursString：所有邻居的连接来创建工具提示

- neighbours：（从这里的第二个答案的帮助：Show data on mouseover of circle），如果以后需要

我们创建工具提示所有邻居节点的数组。显然，在你的情况下，你不会需要这个所以才通过currentNode.neighboursString到d3.tip，应该很简单：

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

现在能够展示在悬停编辑提示：

node.on("mouseover", function(d) { 
    tooltip.text(d.neighboursString); //set text to neighboursString attr 
    return tooltip.style("visibility", "visible"); 
    }) 
    .on("mousemove", function(d) { 
    tooltip.text(d.neighboursString); 
    return tooltip.style("top", 
     (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); 
    }) 
    .on("mouseout", function() { 
    return tooltip.style("visibility", "hidden"); 
    }); 

。希望解决您的问题，你仍然可以在我已经显示的例子中双击使用邻居:)