Я пытаюсь загрузить график cytoscape, используя vue и axios. В любом случае не могу настроить cytoscape, поэтому я сначала попробовал только с axios и vue. По-прежнему проблема с прицелом, но я не могу понять, где? Что мне изменить? Как правильно установить vue и axios.
ИЗМЕНИТЬ
Итак, после установки this.nodes я хотел бы нарисовать grapg в cytoscape.js, но всегда получаю ошибки:
-Свойство стиля text-outline-color:
недействительно
-Не назначать сопоставления элементам без соответствующих данных (например, ele 6b899f09-359e-424d-9461-d71c8c3fcd3b
для свойства text-outline-color
с полем данных faveColor
); попробуйте селектор [faveColor]
, чтобы ограничить область действия элементами с определенным faveColor
-Uncaught TypeError: невозможно установить свойство 'сопоставление' нуля
Я считаю, что это проблема с массивом, но я не могу понять, как правильно установить массив, чтобы это могло работать.
Вот код:
draw: function(){
this.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: this.main_layout,
padding: 10
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'opacity': 0.666,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: this.nodes
},
ready: function(){
window.cy = this;
}
});