Как выделить (изменить цвет) всех подключенных (соседей) узлов и ссылок в диаграмме направленности d3

Question

Я видел здесь этот пример http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html Я могу понять это в той мере, в какой я могу внести основные изменения, но не могу был способен сделать одну вещь специально, чтобы выделить (изменить цвет) всех подключенных узлов. например, если я наведите указатель мыши на узел 1 или на узел 1, он должен найти все соседние узлы и выделить пути ссылок, изменив цвет.

Я посмотрел на clicking a node in d3 from a button outside the svg уже ответил, но я не мог заставить его работать над этим примером.

Буду благодарен, если кто-то может помочь здесь и изменить существующий код для достижения поиска подключенных узлов/ссылок.

Я извиняюсь, если это действительно очень простой вопрос, и я пропускаю что-то действительно очевидное здесь.

Answer 1

Я бы порекомендовал вам прочитать инструкцию по поведению Drag: https://github.com/mbostock/d3/wiki/Drag-Behavior. Таким образом, основной способ изменения цвета узлов заключается в переключении классов на событие начала перетаскивания. Например, рассмотрим следующий CSS:

.node { 
    stroke: #000000; 
    stroke-width: 1.5px; 
} 

circle.others{ 

fill: #C0C0C0;  
} 

Теперь учитывая, что вы выразили свои узлы, как круги ради этого примера (это делается в d3 Force Directed Graph: http://bl.ocks.org/mbostock/4062045), вы можете зарегистрировать dragstart событие в вашем сценарии d3, например:

function dragstart(d) { 
d3.selectAll("circle").classed("others",true); 
d3.select(this).classed("others", false); 

} 

Эта же идея, может быть применена к ссылкам. Надеюсь, это поможет!

Answer 2

В d3.js v4, вы должны просто сделать это так, и он должен просто работать.

Во-первых, перетаскивание начать:

function dragstarted(d) { 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
    d.fx = d.x; 
    d.fy = d.y; 

    d3.selectAll("line").transition().duration(500) 
     .style("opacity", function (o) { 
      return o.source === d || o.target === d ? 1 : 0; 
     }); 
    d3.selectAll("circle").transition().duration(500) 
     .style("opacity", function (o) { 
      return neighboring(d, o) ? 1 : 0; 
     }); 

} 

второй, конец сопротивления:

function dragended(d) { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d.fx = null; 
    d.fy = null; 
    d3.selectAll("line").transition().duration(500) 
     .style("opacity", 1); 
    d3.selectAll("circle").transition().duration(500) 
     .style("opacity", 1); 
} 

Конечно, вы должны определить соседа функцию:

graph.links.forEach(function(d) { 
     linkedByIndex[d.source.index + "," + d.target.index] = 1; 
     linkedByIndex[d.target.index + "," + d.source.index] = 1; 
    }); 
function neighboring(a, b) { 
    return a.index == b.index || linkedByIndex[a.index + "," + b.index]; 
}