Относительное положение узлов Cytoscape и автоматическая настройка по отношению к фоновому изображению

У меня есть проблема в течение нескольких недель, в основном мне нужно создать карту с использованием фонового изображения и сети, такой как цитоскейп.

введите здесь описание изображения

Я сохраняю положение узлов, но когда я переключаюсь с монитора или захожу в полноэкранный режим, я явно теряю отзывчивость.

как я могу заставить цитоскейп реагировать на фоновое изображение независимо от размера экрана (мобильный, рабочий стол, стол)?

введите здесь описание изображения

<div class='cy-container rotata0v'  id="cy" [ngStyle]="{'background-image': getUrl()}">
</div>

   this.style = this.style || cytoscape.stylesheet()
      .selector('node')
      .css({
        'shape': 'data(shapeType)',
        'width': 'mapData(weight, 40, 80, 20, 60)',
        'content': 'data(name)',
        'text-valign': 'center',
        'text-outline-width': 1,
        'text-outline-color': 'data(colorCode)',
        'background-color': 'data(colorCode)',
        'color': '#fff',
        'font-size': 10
      })
      .selector(':selected')
      .css({
        'border-width': 1,
        'border-color': 'black'
      })
      .selector('edge')
      .css({
        'curve-style': 'bezier',
        'opacity': 0.7,
        'width': 'mapData(strength, 70, 100, 2, 6)',
        'target-arrow-shape': 'triangle',
        'line-color': 'data(colorCode)',
        'source-arrow-color': 'data(colorCode)',
        'target-arrow-color': 'data(colorCode)'
      })
      .selector('edge.questionable')
      .css({
        'line-style': 'dotted',
        'target-arrow-shape': 'diamond'
      })
      .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      });
  }

person Rafael Rocha    schedule 10.11.2020    source источник
comment
Ответ здесь! stackoverflow.com/questions/58586780/   -  person Rafael Rocha    schedule 10.11.2020