大佬教程收集整理的这篇文章主要介绍了从一个节点拖动到另一个节点时，Cytoscape edgehandles ghost 预览显示“未定义”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当使用边缘手柄（细胞景观扩展）在两个节点 like this 之间创建边缘时，我在箭头边缘看到“未定义”。有没有我可以设置的属性来摆脱这个？是在输入中还是在带有选择器的样式页面中？
作为参考，我正在使用
var eh = cy.edgehandles({defaults}) 和 eh.enableDrawMode() 以及 edgehandles github 中定义的默认值。
谢谢！
edge-handles 演示中的代码在我的代码段中运行良好，您可以将其用作起点：
document.addEventListener('DOMContentLoaded',function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),layout: {
name: 'grid',rows: 2,cols: 2
},style: [{
SELEctor: 'node[name]',style: {
'content': 'data(Name)'
}
},{
SELEctor: 'edge',style: {
'curve-style': 'bezier','target-arrow-shape': 'triangle'
}
},{
SELEctor: '.eh-handle',style: {
'BACkground-color': 'red','width': 12,'height': 12,'shape': 'ellipse','overlay-opacity': 0,'border-width': 12,// makes the handle easier to hit
'border-opacity': 0
}
},{
SELEctor: '.eh-hover',style: {
'BACkground-color': 'red'
}
},{
SELEctor: '.eh-source',style: {
'border-width': 2,'border-color': 'red'
}
},{
SELEctor: '.eh-target',{
SELEctor: '.eh-preview,.eh-ghost-edge','line-color': 'red','target-arrow-color': 'red','source-arrow-color': 'red'
}
},{
SELEctor: '.eh-ghost-edge.eh-preview-active',style: {
'opacity': 0
}
}
],elements: {
nodes: [{
data: {
id: 'j',name: 'jerry'
}
},{
data: {
id: 'e',name: 'Elaine'
}
},{
data: {
id: 'k',name: 'Kramer'
}
},{
data: {
id: 'g',name: 'George'
}
}
],edges: [{
data: {
source: 'j',target: 'e'
}
},{
data: {
source: 'j',target: 'k'
}
},target: 'g'
}
},{
data: {
source: 'e',target: 'j'
}
},{
data: {
source: 'k',{
data: {
source: 'g',target: 'j'
}
}
]
}
});
var eh = cy.edgehandles();
document.querySELEctor('#draw-on').addEventListener('click',function() {
eh.enableDrawMode();
});
document.querySELEctor('#draw-off').addEventListener('click',function() {
eh.disableDrawMode();
});
document.querySELEctor('#start').addEventListener('click',function() {
eh.start(cy.$('node:SELEcted'));
});
});body {
font-family: Helvetica neue,Helvetica,liberation sans,arial,sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
#buttons {
position: absolute;
right: 0;
bottom: 0;
z-index: 99999;
}<html>
<head>
<title>cytoscape-edgehandles.js demo</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.6.0/cytoscape-edgehandles.min.js"></script>
</head>
<body>
<h1>cytoscape-edgehandles demo</h1>
<div id="cy"></div>
<div id="buttons">
<button id="start">Start on SELEcted</button>
<button id="draw-on">Draw mode on</button>
<button id="draw-off">Draw mode off</button>
</div>
</body>
</html>以上是大佬教程为你收集整理的从一个节点拖动到另一个节点时，Cytoscape edgehandles ghost 预览显示“未定义”全部内容，希望文章能够帮你解决从一个节点拖动到另一个节点时，Cytoscape edgehandles ghost 预览显示“未定义”所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。