Javascript 如何实现D3js力有向图中节点的高亮和过渡效果？

我试图在D3JS力有向图中的节点上实现Higlight效果

在这样做的过程中，我面临以下问题

突出效果： A.鼠标悬停在选定节点上时，我正在更改其相邻节点的颜色。但是其他节点的颜色不应该改变（在我的例子中，它变成红色，不知道如何修复它）如何修复？。 B当鼠标悬停在选定节点上时，我想通过增加其半径为所有互连节点添加过渡效果。 其他节点也应该淡出，这可能吗

请参考正在使用的js小提琴：

要在鼠标悬停时不更改其他节点的颜色，必须更改下面的

getNodeColor

函数：

function getNodeColor(node, neighbors) {
  // If is neighbor
  if ( neighbors.indexOf(node.id) > -1) {
    return 'rgba(251, 130, 30, 1)'
  } 
  else {
        return color(node.id);
  }
}

为了放大节点，您必须在

selectNode

函数中调用另一个函数

getNodeRadius

，该函数在（'mouseover'，selectNode'）上被调用

注意方法

.transition（）。duration（500）

指示以500毫秒的持续时间设置此结束状态的动画

需要将

getNodeRadius

函数定义为：

function getNodeRadius(node, neighbors) {
  // If is neighbor
  if ( neighbors.indexOf(node.id) > -1) {
    return '60'
  } 
  else {
        return '40'
  }
}

完整的工作示例如下：

var图={
“节点”：[
{'id'：'Material_Definition'，'group'：0}，
{'id'：'Lot1'，'group'：1}，
{'id'：'Lot2'，'group'：1}，
{'id'：'Lot3'，'group'：1}，
{'id'：'Lot4'，'group'：1}，
{'id'：'Lot5'，'group'：1}，
{'id'：'Lot6'，'group'：1}，
{'id'：'Lot7'，'group'：1}，
{'id'：'Lot8'，'group'：1}，
{'id'：'Lot9'，'group'：1}，
{'id'：'Lot10'，'group'：1}，
{'id'：'Lot11'，'group'：1}，
{'id'：'Lot12'，'group'：1}，
{'id'：'Lot13'，'group'：1}，
{'id'：'Lot14'，'group'：1}，
{'id'：'Lot15'，'group'：1}，
{'id'：'Lot16'，'group'：1}，
{'id'：'Lot17'，'group'：1}，
{'id'：'Lot18'，'group'：1}，
{'id'：'Lot19'，'group'：1}，
{'id'：'Lot20'，'group'：1}，
{'id'：'SubLot1_Lot1'，'group'：2}，
{'id'：'SubLot2_Lot1'，'group'：2}，
{'id'：'SubLot3_Lot1'，'group'：2}，
{'id'：'SubLot4_Lot1'，'group'：2}，
{'id'：'SubLot5_Lot1'，'group'：2}，
{'id'：'SubLot6_Lot1'，'group'：2}，
{'id'：'SubLot1_Lot2'，'group'：2}，
{'id'：'SubLot2_Lot2'，'group'：2}，
{'id'：'SubLot3_Lot2'，'group'：2}，
{'id'：'SubLot4_Lot2'，'group'：2}，
{'id'：'SubLot5_Lot2'，'group'：2}，
{'id'：'SubLot6_Lot2'，'group'：2}]，
“链接”：[
/*链接到地块的材质定义*/
{'source'：'Material_Definition'，'target'：'Lot1'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot2'，'value'：8，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot3'，'value'：10，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot3'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot4'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot5'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot6'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot7'，'value'：2，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot8'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot9'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot10'，'value'：8，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot11'，'value'：10，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot12'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot13'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot14'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot15'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot16'，'value'：2，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot17'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot18'，'value'：1，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot19'，'value'：2，'type'：'A'}，
{'source'：'Material_Definition'，'target'：'Lot20'，'value'：1，'type'：'A'}，
/*Lot1链接到子批次*/
{'source'：'Lot1'，'target'：'SubLot1_Lot1'，'value'：2，'type'：'A'}，
{'source'：'Lot1'，'target'：'SubLot2_Lot1'，'value'：1，'type'：'A'}，
{'source'：'Lot1'，'target'：'SubLot3_Lot1'，'value'：2，'type'：'A'}，
{'source'：'Lot1'，'target'：'SubLot4_Lot1'，'value'：1，'type'：'A'}，
{'source'：'Lot1'，'target'：'SubLot5_Lot1'，'value'：2，'type'：'A'}，
{'source'：'Lot1'，'target'：'SubLot6_Lot1'，'value'：1，'type'：'A'}，
/*Lot2链接到子批次*/
{'source'：'Lot2'，'target'：'SubLot1_Lot2'，'value'：2，'type'：'A'}，
{'source'：'Lot2'，'target'：'SubLot2_Lot2'，'value'：1，'type'：'A'}，
{'source'：'Lot2'，'target'：'SubLot3_Lot2'，'value'：2，'type'：'A'}，
{'source'：'Lot2'，'target'：'SubLot4_Lot2'，'value'：1，'type'：'A'}，
{'source'：'Lot2'，'target'：'SubLot5_Lot2'，'value'：2，'type'：'A'}，
{'source'：'Lot2'，'target'：'SubLot6_Lot2'，'value'：1，'type'：'A'}，
/*互联地块*/
{'source'：'Lot10'，'target'：'Lot18'，'value'：2，'type'：'A'}，
{'source'：'Lot10'，'target'：'Lot19'，'value'：1，'type'：'A'}，
{'source'：'Lot10'，'target'：'Lot20'，'value'：2，'type'：'A'}，
{'source'：'Lot7'，'target'：'Lot8'，'value'：1，'type'：'A'}，
{'source'：'Lot7'，'target'：'Lot9'，'value'：2，'type'：'A'}，
{'source'：'Lot7'，'target'：'Lot10'，'value'：1，'type'：'A'}，
{'source'：'Lot12'，'target'：'Lot4'，'value'：2，'type'：'A'}，
{'source'：'Lot12'，'target'：'Lot3'，'value'：1，'type'：'A'}，
{'source'：'Lot12'，'target'：'Lot2'，'value'：2，'type'：'A'}，
{'source'：'Lot16'，'target'：'Lot1'，'value'：1，'type'：'A'}，
{'source'：'Lot16'，'target'：'Lot9'，'value'：2，'type'：'A'}，
{'source'：'Lot16'，'target'：'Lot12'，'value'：1，'type'：'A'}
]};
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var zoom_handler=d3.zoom（）.on（“缩放”，缩放动作）；
//缩放处理程序（svg）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.distance（300）.id（函数d）{
返回d.id；
}))
.力（“电荷”，d3.力人体（）.力（-300））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var g=svg.append（“g”）
.attr（“类”、“一切”）；
调用（缩放处理程序）
.call（zoom_handler.tra
function selectNode(selectedNode) {
  var neighbors = getNeighbors(selectedNode)
  nodeElements.transition()
        .duration(500)
        .attr('fill', function(node) {
            return getNodeColor(node, neighbors)
          })
        .attr('r', function(node) {
          return getNodeRadius(node,neighbors);
        })
}

function getNodeRadius(node, neighbors) {
  // If is neighbor
  if ( neighbors.indexOf(node.id) > -1) {
    return '60'
  } 
  else {
        return '40'
  }
}