He estado tratando de lograr resaltar la funcionalidad de los nodos adyacentes, de los que he encontrado ejemplos antiguos en algunos lugares
https://bl.ocks.org/mapio/53fed7d84cd1812d6a6639ed7aa83868 https://bl.ocks.org/martinjc/7aa53c7bf3e411238ac8aef280bd6581 ¿Cómo implementar el efecto de resaltado y transición para los nodos en el gráfico dirigido por fuerza D3js?
aquí está mi intento de codepen.
Estuve más cerca de probar la implementación de Martin, pero creo que la versión anterior de d3 podría estar causando problemas (¿forEach?).
// build a dictionary of nodes that are linked var linkedByIndex = {}; links.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); // check the dictionary to see if nodes are linked function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } // fade nodes on hover function mouseOver(opacity) { return function(d) { // check all other nodes to see if they're connected // to this one. if so, keep the opacity at 1, otherwise // fade nodes.style("stroke-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); nodes.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); // also style link accordingly links.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity; }); links.style("stroke", function(o){ return o.source === d || o.target === d ? o.source.colour : "#ddd"; }); }; }