我正在使用cytoscape.js版本3.7.0来显示关系图。理想的效果是单击一个节点时，其他节点和边缘变成不可用状态。我找不到一个属性来达到目标。我正在尝试另一种方式：将click事件添加到节点，单击该节点时，设置所有元素“ opacity”：“ 0.2”，“ text-opacity”：“ 0”，然后设置当前节点“ opacity”：“ 1 “，” text-opacity“：” 1“，不透明度属性有效，但text-opacity无效，仅滚动鼠标即可放大图形，节点和边缘上的标签文本不可见，请滚动鼠标以便缩小图形，使标签文本再次可见。在我的提交中，当设置了“ text-opacity”：“ 0”时，无论是否缩放，标签文本都应该不可见。
cytoscape.js版本为3.7.0。 我尝试将click事件添加到节点，单击该节点时，设置所有元素“ opacity”：“ 0.2”，“ text-opacity”：“ 0”，然后设置当前节点“ opacity”：“ 1”，“ text-opacity“：” 1“，只需滚动鼠标即可将图形” text-opacity“：” 0“放大。
<!DOCTYPE html>
<html>
<head>
<title>Learning Cytoscape.js</title>
<style type="text/css">
/* cytoscape graph */
#cy {
height: 600px;
width: 1200px;
background-color: #00f9f9;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="cytoscape.min.js"></script>
<script>
let highlightLineWidth = "3px";
let normalLineWidth = "1px";
$(function () {
let edgeMouseOverHandler = function (evt) {
evt.target.style('width', highlightLineWidth);
};
let edgeMouseOutHandler = function (evt) {
evt.target.style('width', normalLineWidth);
};
let nodeMouseOverHandler = function (evt) {
evt.target.connectedEdges().style('width', highlightLineWidth);
};
let nodeMouseOutHandler = function (evt) {
evt.target.connectedEdges().style('width', normalLineWidth);
};
let cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node[label = "Person"]',
css: {
'background-color': '#6FB1FC', 'content': 'data(name)', "font-size": "5px",
"overlay-opacity": "0",
"text-valign": "center",
"text-halign": "center",
"width": "50px",
"height": "50px",
"shape": "circle"
}
},
{
selector: 'node[label = "Movie"]',
css: {
'background-color': '#F5A45D', 'content': 'data(title)', "font-size": "5px",
"text-valign": "center",
"text-halign": "center",
"width": "50px",
"height": "50px",
"shape": "circle",
"overlay-opacity": "0"
}
},
{
selector: 'edge',
css: {
'content': 'data(relationship)', 'target-arrow-shape': 'vee', "font-size": "5px",
'curve-style': 'bezier',
"line-style": "solid",
"width": normalLineWidth,
"overlay-opacity": "0",
}
}
],
elements: {
nodes: [
{data: {id: '172', name: 'Tom', label: 'Person'}, position: { x: 300, y: 300 }},
{data: {id: '173', name: 'Jack', label: 'Person'}, position: { x: 400, y: 230 }},
{data: {id: '174', name: 'Mike', label: 'Person'}, position: { x: 210, y: 350 }},
{data: {id: '175', name: 'Lucy', label: 'Person'}, position: { x: 80, y: 60 }},
{data: {id: '183', title: 'ABC', label: 'Movie'}, position: { x: 370, y: 390 }},
{data: {id: '184', title: 'EFG', label: 'Movie'}, position: { x: 200, y: 100 }},
{data: {id: '185', title: 'movie3', label: 'Movie'}, position: { x: 130, y: 165 }},
{data: {id: '186', title: 'movie4', label: 'Movie'}, position: { x: 278, y: 55 }},
{data: {id: '187', title: 'movie5', label: 'Movie'}, position: { x: 180, y: 30 }},
{data: {id: '188', title: 'movie6', label: 'Movie'}, position: { x: 90, y: 290 }},
{data: {id: '189', title: 'movie7', label: 'Movie'}, position: { x: 45, y: 150 }},
{data: {id: '190', title: 'movie8', label: 'Movie'}, position: { x: 250, y: 200 }},
{data: {id: '191', title: 'movie9', label: 'Movie'}, position: { x: 300, y: 400 }},
{data: {id: '192', title: 'movie10', label: 'Movie'}, position: { x: 500, y: 300 }},
{data: {id: '193', title: 'movie11', label: 'Movie'}, position: { x: 280, y: 120 }},
{data: {id: '194', title: 'movie112', label: 'Movie'}, position: { x: 80, y: 196 }},
],
edges: [{data: {source: '172', target: '183', relationship: 'like'}},
{data: {source: '172', target: '185', relationship: 'like'}},
{data: {source: '173', target: '187', relationship: 'like'}},
{data: {source: '174', target: '188', relationship: 'like'}},
{data: {source: '175', target: '184', relationship: 'like'}},
{data: {source: '172', target: '183', relationship: 'like'}},
{data: {source: '172', target: '192', relationship: 'like'}},
{data: {source: '172', target: '194', relationship: 'like'}},
{data: {source: '172', target: '190', relationship: 'like'}},
{data: {source: '172', target: '183', relationship: 'like'}},
]
},
layout: {
name: 'preset',
}
});
bindEventHandler();
console.log("--------------------------");
cy.on('click', function (event) {
if (event.target === cy) {
cy.elements()
.style("opacity", 1)
.style("events", "yes");
console.log('tap on background');
} else {
console.log('tap on some element');
}
});
cy.on('click', 'node', function (evt) {
console.log("======================");
console.log(evt.target.style());
let toHighlightElements = getToHighlightElements(evt);
// cy.startBatch();
cy.elements().style({"events":"no", "opacity":"0.2", "text-opacity":"0"});
console.log("+++++++++++++++++++++++");
console.log(evt.target.style());
toHighlightElements
.style("opacity", 1);
evt.target.connectedEdges().style("width", highlightLineWidth);
// cy.endBatch();
});
function getToHighlightElements(evt) {
let result = cy.collection();
let tapNode = evt.target;
result.merge(tapNode).merge(tapNode.neighborhood());
return result;
}
function getToIgnoreElements(eles) {
if (eles) {
return cy.elements().unmerge(eles);
} else {
return cy.elements();
}
}
function bindEventHandler() {
cy.on('mouseover', 'edge', edgeMouseOverHandler);
cy.on('mouseout', 'edge', edgeMouseOutHandler);
cy.on('mouseover', 'node', nodeMouseOverHandler);
cy.on('mouseout', 'node', nodeMouseOutHandler);
}
});
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
描述所期望的：当设置“ text-opacity”：“ 0”时，元素上的标签文本不可见。
实际结果：设置样式后，滚动鼠标以放大图形，文本不可见，滚动鼠标以缩小图形，文本再次可见。