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

。希望解決您的問題，你仍然可以在我已經顯示的例子中雙擊使用鄰居:)