Блог

Главная - Вопросы по программированию - Динамическое добавление css-класса в узел cytoscape при нажатии на узел с помощью cytoscape.js

Динамическое добавление css-класса в узел cytoscape при нажатии на узел с помощью cytoscape.js

#cytoscape.js #cytoscape #cytoscape-web

#cytoscape.js #cytoscape #cytoscape-веб

Вопрос:

Я пытаюсь добавить класс на кране узла в cytoscape.js . Вот ссылка для полного кода:

https://stackblitz.com/edit/angular-kpnys1?file=src/app/app.component.ts

Функция ngViewAfterInit

   cy.on("tap", "node", function(evt) {
      var node = evt.target;
      console.log("tapped "   node.id());
      cy.nodes(node).classes("foo");
    });

Tap работает нормально, но он не добавляет никакого класса к узлу. Возможно ли это?

Ответ №1:

Для этого вам нужно будет использовать правильный метод. В настоящее время ваш код вызывает node.classes() , который удаляет все предыдущие классы узла (вы в основном перезаписываете массив классов узла).

Что вы хотите сделать: используйте node.addClass("foo") и добавьте запись в свою таблицу стилей:

 {
    selector: ".foo",
    css: {
        "background-color": "green"
    }
}

Точка указывает на класс, но вы можете указать еще больше. Если вы хотите добавить класс foo только к родительским узлам, измените .foo на :parent.foo .

Но помимо этого, ваш код действительно работал (вроде), класс присутствовал при нажатии на узел. Вот отредактированная версия вашего stackblitz, я добавил упомянутые изменения и присвоил одному родительскому элементу класс «bar». Если вы нажмете на родительский элемент, узел изменит цвет фона на зеленый и зарегистрирует свои текущие классы в консоли:

стекблитц

Комментарии:

1. Есть ли способ отключить масштабирование прокрутки? Если у меня длинная диаграмма и есть полоса прокрутки, колесико мыши просто увеличивает масштаб диаграммы. Могу ли я отключить это?

2. Просто используйте userZoomingEnabled: false, в своем cytoscape.js инициализация. userZoomingEnabled : разрешено ли пользовательским событиям (например, колесу мыши, щелчку для увеличения) увеличивать масштаб графика. Этот параметр не влияет на программные изменения масштаба

3. Это странно, когда я уменьшаю размер своего браузера, я не вижу никаких полос прокрутки. Можем ли мы сделать график адаптивным и динамически подстраиваться под ширину и высоту экрана?

4. Cytoscape.js это просто холст, он не реагирует на изменение размера браузера. Вы инициализируете его для некоторых начальных параметров (определенная высота, ширина, …), и вы можете предоставить стили css для cy div, но после инициализации холст не меняется. Насколько я знаю, вы не можете это изменить, но я могу ошибаться. В любом случае старайтесь придерживаться исходного размера

5. Что вы имеете в виду под этим, что бы вы определили как метку поверх ребра?