cytoscape.js 只能从 node.outgoers() 获取目标

Question

我目前正在尝试使用node.outgoers()方法来获取节点的所有子节点。但是，如果我正确理解文档，则此方法不仅返回子节点，还返回节点附带的边。我假设我可以使用文档中提到的可选选择器进行过滤，但由于我对 javascript 还比较陌生，所以我不太明白如何只返回没有边缘的节点。

我的代码本质上应该做的是一个 HITS 实现，其中每个节点作为键存储在映射中，并作为值存储在数组中，其中包含以下结构的值：

• [0] -> 权限值
• [1] -> 中心值
• [2] -> 父节点
• [3] -> 子节点

然后调用 updateHub 函数，通过从映射中访问所有子节点的 Authority 值求和来计算新值。 但是，当尝试访问子节点的映射时，这会引发 Uncaught TypeError: Cannot readproperties of undefined (reading '0')。我相信这是由于前面提到的问题所致，即 Incomers() 返回带有目标的边，而不仅仅是目标。

 nodes.forEach((n)=>{
                var array = [];
                array.push(1.0);
                array.push(1.0);
                array.push(n.incomers());
                array.push(n.outgoers());
                map.set(n, array);
            })

            // calculate authority/hub for each node in the map
            // TODO - Not Working

            map.forEach(function(value, key) {
                updateAuthority(key, map, value);
                updateHub(key, map, value);
            });

function updateHub(n, map, array){

    array[3].forEach((c) =>{
        array[1] += map[c][0];
    });
}

我尝试过使用选择器，但我对 JavaScript 仍然很陌生，似乎无法弄清楚这一点。

Answer 1

为了获取子节点，您需要使用

node.outgoers().nodes()

。我添加了一个工作示例，控制台输出应包含所选节点的所有子节点，您可以在浏览器控制台中验证这一点（stackoverflow 控制台不起作用）：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: 'n0'
        }
      },
      {
        data: {
          id: 'n1'
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      },
      {
        data: {
          id: 'n4'
        }
      },
      {
        data: {
          id: 'n5'
        }
      },
      {
        data: {
          id: 'n6'
        }
      },
      {
        data: {
          id: 'n7'
        }
      },
      {
        data: {
          id: 'n8'
        }
      },
      {
        data: {
          id: 'n9'
        }
      },
      {
        data: {
          id: 'n10'
        }
      },
      {
        data: {
          id: 'n11'
        }
      },
      {
        data: {
          id: 'n12'
        }
      },
      {
        data: {
          id: 'n13'
        }
      },
      {
        data: {
          id: 'n14'
        }
      },
      {
        data: {
          id: 'n15'
        }
      },
      {
        data: {
          id: 'n16'
        }
      }
    ],
    edges: [{
        data: {
          source: 'n0',
          target: 'n1'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n3'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n7'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n11'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n4'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n5'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n6'
        }
      },
      {
        data: {
          source: 'n6',
          target: 'n8'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n9'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n10'
        }
      },
      {
        data: {
          source: 'n11',
          target: 'n12'
        }
      },
      {
        data: {
          source: 'n12',
          target: 'n13'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n14'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n15'
        }
      },
    ]
  },

  layout: {
    name: 'dagre',
    padding: 5
  }
});
cy.off('click');
cy.on('click', 'node', function(e) {
  console.log(e.target.outgoers().nodes());
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>