Question

当鼠标悬停在节点上时，我想显示选定的节点和边缘。例如，当鼠标位于节点“ b”上时，仅突出显示节点“ e”以及连接“ b”和“ e”的边缘。同样，当鼠标位于“ a”上时，仅突出显示节点“ b”以及连接“ a”和“ b”的边。我用过eles.difference() 我的jsfiddle在这里。它适用于所有邻居，而不是选定的邻居。 JsFiddle

代码段在这里。

  var elesJson = {
    nodes: [
      { data: { id: 'a'} },
      { data: { id: 'b'} },
      { data: { id: 'c'} },
      { data: { id: 'd'} },
      { data: { id: 'e'} }
    ],
  edges: [
      { data: { id: 'ae', source: 'a', target: 'e' } },
      { data: { id: 'ab', source: 'a', target: 'b' } },
      { data: { id: 'be', source: 'b', target: 'e' } },
      { data: { id: 'bc', source: 'b', target: 'c' } },
      { data: { id: 'ce', source: 'c', target: 'e' } },
      { data: { id: 'cd', source: 'c', target: 'd' } },
      { data: { id: 'de', source: 'd', target: 'e' } }
  ] 
};

var selectJsona={
 nodes: [
    { data: { id: 'a'} },
    { data: { id: 'b' } } ],
edges: [    { data: { id: 'ab', source: 'a', target: 'b' } } ]};
var selectJsonb={
 nodes: [
    { data: { id: 'e' } },
    { data: { id: 'b' } } ],
edges: [    { data: { id: 'eb', source: 'e', target: 'b' } } ]};




var cy=cytoscape({
  container: document.getElementById('cy'),
  style: cytoscape.stylesheet()
    .selector('node').css({'background-color': 'red','content': 'data(id)'})
.selector('edge').css({'line-color': 'grey' })
.selector('node.highlight').css({'border-color': '#FFF','border-width': '2px'})
.selector('node.semitransp').css({ 'opacity': '0.5' })
.selector('edge.highlight').css({ 'mid-target-arrow-color': '#FFF' })
.selector('edge.semitransp').css({ 'opacity': '0.2' }),

  elements: elesJson,
  layout: {    name: 'circle'},
});


cy.on('mouseover', 'node', function(e){
    var neigh = e.target;
  cy.elements().difference(neigh.outgoers().union(neigh.incomers())).not(neigh).addClass('semitransp');
    neigh.addClass('highlight').outgoers().addClass('highlight');
});
cy.on('mouseout', 'node', function(e){
    var neigh = e.target;
    cy.elements().removeClass('semitransp');
  neigh.removeClass('highlight').outgoers().union(neigh.incomers()).removeClass('highlight');
});

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

<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
 <link rel="stylesheet" type = "text/css" href ="jquery.qtip.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.5/cytoscape.js "></script>
 
 
 </head>
<body>
         <div id="cy"></div>
 </body>
</html>

显示cytoscape.js中的选定节点

0 个答案: