我只是使用cytoscape.js在我的网站上绘制树形图。在桌面Web浏览器中,没有任何问题。我还在Android移动网络上测试网络,但问题出现了。当我选中屏幕时,光标不会出现在我点击的位置,而是出现在点击位置的左上角。我也在iphone网页浏览器中测试它,发生了同样的问题。
我的细胞景观代码:
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'dagre',
padding: 10,
roots:'#j'
},
zoom:1,
wheelSensitivity: 0.1,
spacingFactor: 0.1,
boxSelectionEnabled: false,
elements: {
nodes: [
{ data: { id: 'j', name: 'Test1', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
{ data: { id: 'e', name: 'Test2', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
{ data: { id: 'k', name: 'Test3', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
],
edges: [
{ data: { source: 'j', target: 'e', faveColor: '#6FB1FC'} },
{ data: { source: 'j', target: 'k', faveColor: '#EDA1ED' } },
]
},
style:[
{
selector:'node',
style:{
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 10, 40)',
'height': 'mapData(weight, 40, 80, 10, 30)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 1,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff',
'font-size': '7px'
}
},
{
selector:':selected',
style:{
'border-width': 3,
'border-color': '#f47742'
}
},
{
selector:'edge',
style:{
'curve-style': 'bezier',
'opacity': 0.666,
'width': 3,
'target-arrow-shape': 'triangle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)',
}
},
{
selector:'edge.questionable',
style:{
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
}
},
{
selector:'.faded',
style:{
'opacity': 0.25,
'text-opacity': 0
}
}]
});
cy.on('click', 'node', function(evt){
alert("test");
});
cy.minZoom(1);
谢谢