применить несколько событий наведения мыши к соседним (подключенным) узлам

В другом сценарии я бы поместил свои визуальные объекты в структуру данных графа и перемещался по ней, чтобы эффективно обновлять соответствующие элементы. Но это d3, поэтому мы будем делать то же самое, но вместо структуры данных графа, которую мы создаем, мы будем использовать выборки d3 (которые могут быть похожи на графы, но для этого они будут больше похожи на массивы). Алгоритмически этот подход будет не таким эффективным, но наши графы маленькие.

Поэтому, работая в обратном направлении, я хочу, чтобы выбор включал только соседние узлы выбранного узла. Я сделаю это, выбрав все круги, а затем используя метод фильтра выбора d3, чтобы уменьшить это до только тех кругов, которые являются соседями.

Конечно, тогда мне нужен список соседей, но несколько хороших методов массива js быстро справятся с этим. Окончательный соответствующий код (при наведении курсора) даже не такой длинный, но я добавил кучу комментариев:

// Figure out the neighboring node id's with brute strength because the graph is small
var nodeNeighbors = graph.links.filter(function(link) {
    // Filter the list of links to only those links that have our target 
    // node as a source or target
    return link.source.index === d.index || link.target.index === d.index;})
.map(function(link) {
    // Map the list of links to a simple array of the neighboring indices - this is
    // technically not required but makes the code below simpler because we can use         
    // indexOf instead of iterating and searching ourselves.
    return link.source.index === d.index ? link.target.index : link.source.index; });

// Reset all circles - we will do this in mouseout also
svg.selectAll('circle').style('stroke', 'gray');

// now we select the neighboring circles and apply whatever style we want. 
// Note that we could also filter a selection of links in this way if we want to 
// Highlight those as well
svg.selectAll('circle').filter(function(node) {
    // I filter the selection of all circles to only those that hold a node with an
    // index in my listg of neighbors
    return nodeNeighbors.indexOf(node.index) > -1;
})
.style('stroke', 'orange');

Вы также можете попробовать скрипту.

Я думаю, что важная концепция d3, уместная здесь, заключается в том, что когда вы связываете данные с элементом (обычно используя методы data() или datum() для выборок), эти данные остаются с этим элементом, и любые будущие выборки всегда будут использовать его.

Чтобы связать другие аспекты, вы можете аналогичным образом извлечь эти атрибуты и связать их через d3. Например, для прямоугольников местоположения, которые вы можете добавить при наведении курсора мыши:

var nodeLocations = graph.links.filter(function(link) {
        return link.source.index === d.index || link.target.index === d.index;})
    .map(function(link) {
        return link.source.index === d.index ? link.target.location : link.source.location; });

d3.selectAll("rect").filter(function(node) { return nodeLocations.indexOf(node.location) > -1; }) .style("stroke", "cyan");

Эта вещь, которую я построил, делает это с функцией Ego Network:

https://gist.github.com/emeeks/4588962

Добавьте .on("mouseover", findEgo) к своим узлам, и следующее должно работать, если у вас есть какой-то идентифицирующий атрибут uid, который вы можете сгенерировать при загрузке узлов, если он не удобен. Это немного излишне, так как он позволяет использовать эго-сети n-степеней и создает агрегированную таблицу для других функций сетевого анализа, но базовая функциональность даст вам то, что вы хотите, и вы или другие пользователи можете найти этот аспект полезным:

 function findEgo(d) {  
  var computedEgoArray = findEgoNetwork(d.id, 1, false,"individual");
  d3.selectAll("circle.node").style("fill", function(p) {return p.id == d.id ? "purple" : computedEgoArray.indexOf(p.id) > -1 ? "blue" : "pink"})
 }

 function findEgoNetwork(searchNode, egoNetworkDegree, isDirected, searchType) {
  var egoNetwork = {};
  for (x in nodes) {
  if (nodes[x].id == searchNode || searchType == "aggregate") {
   egoNetwork[nodes[x].id] = [nodes[x].id];
   var z = 0;
   while (z < egoNetworkDegree) {
    var thisEgoRing = egoNetwork[nodes[x].id].slice(0);
    for (y in links) {
     if (thisEgoRing.indexOf(links[y].source.id) > -1 && thisEgoRing.indexOf(links[y].target.id) == -1) {
     egoNetwork[nodes[x].id].push(links[y].target.id)
     }
    else if (isDirected == false && thisEgoRing.indexOf(links[y].source.id) == -1 && thisEgoRing.indexOf(links[y].target.id) > -1) {
    egoNetwork[nodes[x].id].push(links[y].source.id)
    }
 }
 z++;
 }
 }
 }
 if (searchType == "aggregate") {
 //if it's checking the entire network, pass back the entire object of arrays
 return egoNetwork;
 }
 else {
 //Otherwise only give back the array that corresponds with the search node
 return egoNetwork[searchNode];
 }
 }