Как отрегулировать только некоторые ребра на `mouseover` в графе силы D3 v4

Question

Я работаю над this force graph в D3 v4.

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

Это, как я выделить подключенные узлы после щелчка

//Highlight on click 
function highlighting() { 
//Toggle stores whether the highlighting is on 
var node = d3.selectAll('circle'); 
var link = d3.selectAll('line'); 
var toggle = 0; 
//Create an array logging what is connected to what 
var linkedByIndex = {}; 
for (i = 0; i < dataset.nodes.length; i++) { 
    linkedByIndex[i + "," + i] = 1; 
}; 
d3.selectAll('line').each(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__; 
     node.style("opacity", function (o) { 
      return neighboring(d, o) | neighboring(o, d) ? 1 : 0.0; 
     }); 
     link.style("opacity", function (o) { 
      return d.index==o.source.index | d.index==o.target.index ? 1 : 0.0; 
     }); 
     link.attr('stroke-width' , 4); 
     toggle = 1; 
     interactivityHighlight(); 

     //Change navigation div 
     d3.select('#click01').classed('hidden', true); 
     d3.select('#click02').classed('hidden', false); 

    } else { 
     //Put them back to starting opacity 
     node.style("opacity", 1); 
     link.style("opacity", function (d) {return edgeOpacityScale(d.collaborations);}); 
     link.attr('stroke-width', 1); 
     link.attr('class', null); 
     toggle = 0; 
     //Change navigation 
     d3.select('#click01').classed('hidden', false); 
     d3.select('#click02').classed('hidden', true); 
    } 
} 
node.on('click', connectedNodes); 
} 

И это функция, которую я называю после щелчка

function interactivityHighlight() { 
graph.selectAll('line').on('mouseover', function (d) { 
    if (d3.select(this).style('opacity') == 1) { 
     d3.select(this) 
     .attr('stroke', 'red') 
     .attr('stroke-width', 6); 

     d3.select('#tooltip') 
     .classed('hidden', false); 

     d3.select('#tooltip') 
     .append('p') 
     .attr('id', 'org_names') 
     .text('Collaborations between ' + d.source.name + ' and ' + d.target.name); 

     d3.select('#tooltip') 
     .append('p') 
     .attr('id', 'collaborations') 
     .text('Worked together on ' + d.collaborations + ' projects'); 

     d3.select('#tooltip') 
     .append('p') 
     .attr('id', 'collBudget') 
     .text('Total budget: '+ commafy(d.collBudget)); 
}}) 

graph.selectAll('line').on('mouseout', function (d) { 
    if (d3.select(this).style('opacity') == 1) { 
     d3.select(this) 
     .attr('stroke', 'black') 
     .attr('stroke-width', 4); 

     d3.select('#tooltip') 
     .selectAll('p') 
     .remove(); 

     d3.select('#tooltip') 
     .classed('hidden', true); 
}}) 
} 

В основном все несвязные узлы получают opacity=0 и, таким образом, становятся невидимый. Однако они все еще присутствуют на графике: зависание над линией может не вызвать interactivityHighlight(), потому что мышь фактически витает над невидимым краем.

Есть ли способ, по которому я могу заставить невидимые края действительно исчезнуть или сделать видимыми «на вершине» всех остальных?

Answer 1

Используйте это же правило, которое вы использовали для определения «непрозрачности» для определения «указателей-событий»:

link.attr("pointer-events", function (o) { 
     return d.index==o.source.index | d.index==o.target.index ? "all" : "none"; 
    }); 

Answer 2

Добавьте класс CSS, который включает в себя этот указатель события правила, например:

.hidden { 
    pointer-events: none; 
} 

А затем установить этот класс по ссылкам

.classed("hidden", function(d) { 
    /* return true/false, decide using the same logic you use for opacity */ 
}); 

Links со скрытым класса позволит указатель события проходят через на все, что находится под