El uso de Cytoscape.js en la galería de redes (2): operaciones comunes en gráficos

Language 2023-04-17 04:35:49 views: null

Directorio de artículos

Instancias y colecciones de gráficos

Para usar Cytoscape.js, hay dos partes en la arquitectura a las que los programadores deben prestar atención, a saber, el núcleo (instancia gráfica) y la colección (colección). En Cytoscape.js, el núcleo es el principal punto de entrada de los programadores a la biblioteca. Desde el núcleo, los programadores pueden ejecutar diseños, cambiar ventanas gráficas y realizar otras operaciones en todo el gráfico.

core proporciona varias funciones para acceder a los elementos del gráfico. Cada una de estas funciones devuelve una colección, un conjunto de elementos en el gráfico. Se proporcionan funciones en colecciones que permiten a los programadores filtrar colecciones, realizar operaciones en colecciones, recorrer gráficos sobre colecciones, obtener datos sobre elementos en colecciones y más.

(Este artículo solo enumera algunos atributos o métodos de uso común. Para obtener información más completa, consulte la documentación oficial)

Selector

Los selectores funcionan de manera similar a los selectores de CSS en elementos DOM, pero los selectores en Cytoscape.js funcionan en colecciones de elementos gráficos. Tenga en cuenta que cuando el selector es una función con parámetros, puede usar la eles.filter()función de filtro de estilo en lugar del selector, por ejemplo:

cy.$('#j').neighborhood(function( ele ){
    
    
	return ele.isEdge();
});

se puede reescribir como

let neighborhood = this.cy.$('#b').neighborhood().filter(function( ele ){
    
    
    return ele.isEdge();
});

Los selectores se pueden combinar para realizar consultas potentes en Cytoscape.js, por ejemplo:

// 获取所有weight大于50且高度严格小于180的节点
cy.elements("node[weight >= 50][height < 180]");

se pueden unir con comas

// 得到节点j和从它出来的边
cy.elements('node#j, edge[source = "j"]');

Tenga en cuenta que las cadenas deben estar entre comillas:

cy.filter('node[name = "Jerry"]')

Tenga en cuenta que para ID, nombres de campo, etc., algunos caracteres deben escaparse

cy.filter('#some\\$funky\\@id');//获取id是some$funky@id的元素

Trate de evitar el uso de caracteres no alfanuméricos para nombres de campo e ID para simplificar las cosas. Si debe usar caracteres especiales para ID, use selectores de datos en lugar de selectores de ID

cy.filter('[id = "some$funky@id"]')

Los selectores pueden acceder a los elementos de la matriz y las propiedades del objeto mediante la notación de puntos:

Supongamos que hay nodos:

nodes: [
    {
    
    data: {
    
     id: 'o', name:{
    
    first: "Jerry", last: "Foo"} }},
    {
    
    data: {
    
     id: 'p', labels: ["Person","Man"]}},
]

acceso

cy.elements('node[labels.0 = "Person"]') //获取 data 中 labels 数组第一个元素值为 Person 的节点
cy.elements('node[name.first = "Jerry"]');//获取 data 中 name 对象 first 值为 Jerry 的节点

  1. selector de grupo

    node、edgeo * (selector de grupo) para hacer coincidir los nodos de los elementos, los bordes, todos los elementos según el grupo).

    cy.$('node') //获取所有节点
cy.$('edge') //获取所有边线
cy.$('*') //获取所有元素
cy.$('*node') //获取所有节点

  2. selector de nombre de clase

    .xxxclassNamecoincide con elementos con el nombre de clase especificado

  3. selector de identificación

    #idcoincide con el elemento con el ID especificado

  4. selector de datos

    cy.$('[name]') //获取定义了name属性的元素（值为null被视为已定义，值为undefined被视为没有定义）
cy.$('[^name]') //获取没有定义name属性的元素
cy.$('[?name]') //匹配name属性为真值的元素
cy.$('[!name]') //匹配name属性为假值的元素
cy.$('[name = value]') //匹配name属性值为指定值的元素
cy.$('[name != value]') //匹配name属性值不是指定值的元素
cy.$('[name > value]') //匹配name属性值大于指定值的元素
cy.$('[name >= value]') //匹配name属性值大于等于指定值的元素
cy.$('[name < value]') //匹配name属性值小于指定值的元素
cy.$('[name <= value]') //匹配name属性值小于等于指定值的元素
cy.$('[name *= value]') //匹配name属性值包含指定值作为子字符串的元素
cy.$('[name ^= value]') //匹配name属性值以指定值为开头的元素
cy.$('[name $= value]') //匹配name属性值以指定值为结尾的元素
cy.$('name.0 = value]') //匹配name属性是数组且指定索引处的元素为指定值的元素
cy.$('name.property = value');//匹配name属性是对象且指定key的值为指定值的元素

    Símbolos especiales :

    • @ : modificador de operador de atributo de datos, antepuesto al operador para que no distinga entre mayúsculas y minúsculas

      cy.elements('node[name.first @= "Jerry"]'); //匹配不区分大小写的字符串 jerry

    • ! : modificador de operador de atributo de datos, agregado al operador para negarlo

      cy.$('[name !$= 'ar']')
cy.$('[name !>= 'a']')

    • [[]]: corchetes de metadatos) Utilice corchetes en lugar de corchetes para hacer coincidir metadatos en lugar de datos (p. ej. degree, indegree, outdegree.)

      cy.$('[[degree > 2]]')

  5. Selector de nodos compuestos

    • Haga coincidir los hijos inmediatos de un nodo padre:node > node

    • Haga coincidir los nodos descendientes de un nodo principal:node node

    • (selector de temas) Establezca el tema del selector (por ejemplo $node > node, para seleccionar nodos principales en lugar de nodos secundarios).

  6. selector de animación

    cy.$(':animated') //匹配当前正在进行动画处理的元素。
cy.$(':unanimated') //匹配当前没有在进行动画处理的元素。

  7. seleccionar selector de estado

    cy.$(':selected') //匹配选定的元素。
cy.$(':unselected') //匹配位选定的元素。
cy.$(':selectable') //匹配可以选择的元素。
cy.$(':unselectable') //匹配不可选择的元素。

  8. selector de estado de bloqueo

    cy.$(':locked') //匹配锁定的元素。
cy.$(':unlocked') //匹配未锁定的元素。

  9. selector de estilo

    cy.$(':visible') //匹配可见的元素，即display: element 或 visibility: visible
cy.$(':hidden') //匹配锁定的元素，即display: none 或 visibility: hidden
cy.$(':transparent') //匹配透明的元素，即自己或祖先元素 opacity: 0
cy.$(':backgrounding') //如果元素的背景图像当前正在加载，则匹配该元素。
cy.$(':nonbackgrounding') //如果元素的背景图像当前未加载，则匹配该元素;即没有图像或图像已加载）。

  10. selector de interacción del usuario

    cy.$(':grabbed') //匹配用户抓取的元素。
cy.$(':free') //匹配用户当前未抓取的元素。
cy.$(':grabbable') //匹配用户可抓取的元素。
cy.$(':ungrabbable') //匹配用户不可抓取的元素。
cy.$(':active') //匹配处于活动状态的元素（即用户交互，类似于 CSS中的:active）
cy.$(':inactive') //匹配处于非活动状态（即无用户交互）的元素。
cy.$(':touch') //在基于触摸的环境中显示时（例如在平板电脑上），匹配元素。

  11. Selector de estado dentro y fuera del gráfico

    cy.$(':removed') //匹配已从图形中删除的元素。
cy.$(':inside') //匹配图形中具有的元素（它们不会被删除）。

  12. nodo compuesto

    • :parent: coincide con los nodos principales (que tienen uno o más elementos secundarios).
    • :childless: Coincide con los nodos sin hijos (no tienen hijos).
    • :childo :nonorphan: coincide con los nodos secundarios (cada uno tiene un nodo principal).
    • :orphan: coincide con los nodos huérfanos (cada uno de los cuales no tiene padre).
    • :compound: coincide con el nodo principal. También hace coincidir los bordes conectados a los nodos principales (cada uno de los cuales tiene al menos un padre en los nodos de origen y de destino).

  13. selector de borde

    • :loop: Haga coincidir los bordes del bucle (bordes con el mismo origen y destino).
    • :simple: Haga coincidir los bordes comunes (bordes con diferente origen y destino).

Funciones comunes

Hay varios tipos que realizan diferentes funciones, y los nombres de variables utilizados en la documentación para indicar estos tipos son los siguientes:

nombre de la variable Descripcion funcional
cy centro
eles Una colección de uno o más elementos (nodos y aristas)
ele colección de elementos individuales (nodos o bordes)
nodes Una colección de uno o más nodos.
node colección de nodos individuales
edges una colección de uno o más bordes
edge cobro unilateral
layout disposición
ani animación

Obtener el elemento/la colección especificados

  1. obtener elemento por id

    cy.getElementById('SOMEID')

  2. Obtenga los elementos en el gráfico que coincidan con el selector.

    cy.$() //获取所有元素
cy.$("#a") //获取id是a的元素
cy.elements() //获取所有元素
cy.elements('#a') //获取id是a的元素
cy.nodes() //获取所有节点元素
cy.nodes('#a') //获取id是a的节点元素
cy.edges() //获取所有边线元素
cy.edges('#ab') //获取id是ab的边线元素
cy.filter() //获取所有元素
cy.filter('#a')//获取id是a的元素
cy.filter(function(ele, i, eles){
      
       //对于应返回的元素返回 true 的过滤器函数。本例获取id是a的元素
    if (ele.id() === 'a') {
      
      
        return true
    }
    console.log(ele); //正在考虑过滤的当前元素。
    console.log(i); //用于对图中的元素进行迭代的计数器。
    console.log(eles); //正在过滤的元素的集合
})

    Nota:

    cy.$()La función actúa cy.filter()como un alias para , lo que le permite escribir menos caracteres

    Devuelve una colección vacía si ningún elemento coincide con el selector.

  3. eles.barrio()

    Obtener la vecindad de un elemento. (El elemento de nodo puede obtener los bordes conectados del nodo, pero el elemento de borde no puede obtener los nodos conectados por el borde)

    // 获取与 d 节点相连的边线与节点的合集
let neighborhood = this.cy.nodes('#d').neighborhood();

  4. ellos.componente()

    Obtenga el componente conectado del elemento que llama. Los componentes consideran todos los elementos del diagrama.

  5. bordes.nodos conectados()

    Conecta los nodos a los bordes de la colección.

  6. nodos.connectedEdges()

    Conecta los bordes a los nodos de la colección.

  7. borde.fuente() , bordes.fuentes()

    Obtenga el nodo de origen de este borde, obtenga el nodo de origen del borde en la colección

  8. borde.objetivo(), bordes.objetivos()

    Obtenga el nodo de destino de este borde, obtenga el nodo de destino del borde en la colección

Operaciones y datos comunes de viewport

  1. cy.contenedor()

    Obtenga el elemento HTML DOM que muestra el gráfico.

  2. cy.pan()

    Obtiene o establece la posición de traslación del gráfico.

    cy.pan() //获取
cy.pan({
      
       //设置
    x: 100,
    y: 100 
});

  3. cy.panningEnabled()

    Obtiene o establece si la panorámica está habilitada.

    cy.panningEnabled() //获取
cy.panningEnabled(false);//设置

  4. cy.userPanningEnabled（）

    Obtiene o establece si la panorámica de eventos del usuario (por ejemplo, arrastrar el fondo del gráfico) está habilitada.

    cy.userPanningEnabled() //获取
cy.userPanningEnabled(false);//设置

  5. cy.zoom()

    Obtiene o establece el nivel de zoom del gráfico.

    cy.zoom() //获取
cy.zoom(1.5) //设置
//带选项设置
cy.zoom({
      
      
    level: 0.5,
    position: {
      
      x: 0, y:0},
    renderedPosition: {
      
      x:200, y:200}
})

  6. cy.zoomingEnabled()

    Obtiene o establece si el escalado está habilitado.

    cy.zoomingEnabled() //获取
cy.zoomingEnabled(false) //设置

  7. cy.minZoom()

    Obtiene o establece el nivel de zoom mínimo.

  8. cy.maxZoom()

    Obtiene o establece el nivel de zoom máximo.

  9. cy. ventana gráfica ()

    Establezca el estado de la ventana gráfica (panorámica y zoom) en una sola llamada.

    cy.viewport({
      
      
    zoom: 2,
    pan: {
      
       x: 100, y: 100 }
});

  10. cy.boxSelectionEnabled()

    Obtiene o establece si la selección de casillas está habilitada. Si está habilitado con la panorámica, el usuario debe mantener presionada una de las teclas Mayús, Control, Alt o Comando para iniciar la selección del cuadro.

  11. cy.selectionType()

    Obtiene o establece el tipo de selección. El tipo de selección "único" es el predeterminado, al hacer clic en un elemento se selecciona ese elemento y se anula la selección del elemento anterior. El tipo de selección "aditivo" alterna el estado de selección de un elemento cuando se hace clic.

  12. cy.ancho()

    Obtiene el ancho de pantalla de la ventana gráfica en píxeles.

  13. cy.altura()

    Obtiene la altura de la pantalla de la ventana gráfica en píxeles.

  14. cy.extensión()

    Obtiene las extensiones de la ventana gráfica, un cuadro delimitador en las coordenadas del modelo que le permite saber qué posiciones del modelo están visibles en la ventana gráfica.

  15. cy.autolock()

    Obtener o establecer si el nodo se bloquea automáticamente

  16. cy.autoungrabify()

    Obtenga o establezca si el nodo cancela automáticamente el rastreo

  17. cy.autounselectify()

    Obtener o establecer si el nodo se deselecciona automáticamente

  18. cy.redimensionar()

    Obliga al renderizador a recalcular los límites de la ventana gráfica.

Métodos comunes globales

  1. cy.layout()

    establecer el diseño

    var layout = cy.layout({
      
      
	name: 'random'
});

layout.run();

    Nota: layout.run()el diseño debe ser llamado para que surta efecto

  2. cy.estilo()

    Obtener el objeto de estilo actual

    cambiar el estilo existente

    this.cy.nodes().style({
      
      
    'background-color':'cyan'
})

    o

    this.cy.style('node { background-color: cyan; }')

    agregar al estilo existente

    this.cy.style()
    .selector('node')
        .style('background-color', 'cyan')
    .update() //更新元素，必须包含在结尾

    o

    this.cy.style()
    .selector('node')
        .style({
      
      
            'background-color':'cyan'
        })
    .update()

    Establezca un nuevo estilo para el gráfico:

    this.cy.style()
    .resetToDefault() //启动一个新的默认样式表
    .selector('node')
        .style({
      
      
            'background-color':'cyan'
        })
    .update()

    Configure una hoja de estilo completamente nueva (sin usar la hoja de estilo predeterminada como base):

    this.cy.style()
    .clear() //在没有默认样式表的情况下开始一个新的样式表
    .selector('node')
        .style({
      
      
            'background-color':'cyan'
        })
    .update()

  3. cy.datos()

    Lea y escriba datos definidos por el desarrollador asociados con un gráfico. (datos en datos que no pertenecen a nodos o bordes)

    cy.data() //读取整个data
cy.data('keyA') //读取data中keyA的值
cy.data('keyA', 'bbb') //修改keyA的值为'bbb'
cy.data({
      
      keyA:'aaa',keyB:'bbb'}) //批量修改data中的键值对

  4. eles.on()

    Escuche los eventos que suceden en el elemento

    this.cy.nodes().on('click', (evt) => {
      
      
	console.log(evt)
});

Datos comunes del elemento, método de operación

  1. ele.id()

    Acceso directo para obtener la identificación del elemento.

  2. eles.data()

    Leer y escribir datos definidos por el desarrollador asociados con un elemento. (datos en nodos o aristas).

    cy.edges('#bc').data() //获取全部data
cy.edges('#bc').data('id') //获取data中 id 的值
cy.edges('#bc').data('name', '边线bc') //更改data中 name 的值（如果没有name则是添加）
cy.edges('#bc').data({
      
      name:'边线bc', weight:10}) //更改（或添加）data中的多个值

  3. él.esNodo()

    Determine si el elemento es un nodo.

  4. él.esEdge()

    Determine si el elemento es una arista.

  5. borde.isLoop()

    Determine si un borde es un bucle (es decir, el mismo origen y destino).

  6. borde.esSimple()

    Determine si el borde es un borde normal (es decir, fuente y destino diferentes).

  7. nodo.grado(incluirbucles)

    • nodo.grado(incluirbucles)

      Obtiene el número de veces que un nodo está conectado por un borde. Parámetro Tipo booleano, omitir o truesignifica obtener conteos que incluyen bordes de bucle, falsesignifica obtener conteos que no incluyen bordes de bucle

      //计数包含循环边线
cy.nodes('#a').degree()
cy.nodes('#a').degree(true)
//计数不包含循环边线
cy.nodes('#a').degree(false)

    • nodo.indegree(incluirbucles)

      Obtener la cantidad de veces que un nodo se conecta como destino perimetral

    • nodo. grado de salida (incluir bucles)

      Obtenga la cantidad de veces que un nodo está conectado como una fuente de borde

    • nodos().totalDegree(incluirbucles)

      Obtenga el número total de veces que todos los nodos de la colección están conectados por aristas (equivalente a la cantidad total de aristas * 2)

    • nodos.minDegree(incluirbucles)

      Obtenga el valor mínimo del grado de nodo entre todos los nodos de la colección

    • nodos.maxDegree(incluirbucles)

      Obtenga el valor máximo del grado de nodo entre todos los nodos de la colección

    • nodos.minIndegree( includeLoops )

      Obtener el valor mínimo de grado de nodo entre todos los nodos de la colección

    • nodos.maxIndegree( includeLoops )

      Obtener el valor máximo de grado de nodo entre todos los nodos de la colección

    • nodos.minOutdegree( includeLoops )

      Obtener el valor mínimo de grado de salida del nodo entre todos los nodos de la colección

    • nodos.maxOutdegree (incluir bucles)

      Obtenga el valor máximo del grado de salida del nodo entre todos los nodos de la colección

  8. nodo.posición()

    • nodo.posición()

      Obtenga el objeto de ubicación del nodo, como:{x: 117, y: 100}

    • nodo.posición (dimensión)

      Obtiene el valor de la dimensión de ubicación especificada. Por ejemplo node.position( 'y' ), obtenga la posición del eje y del nodo

    • nodo.posición (dimensión, valor)

      Establece el valor de la dimensión de ubicación especificada.

    • nodo.posición( pos )

      Establecer el valor de posición con un objeto

  9. nodos.shift()

    Mueva la posición del nodo con respecto a la posición original del nodo.

    cy.nodes('#a, #b').shift('x', 100) //让a、b节点水平移动100px
cy.nodes('#a, #b').shift({
      
      x: 100, y: 100}) //让a、b节点水平移动100px，垂直移动100px

  10. ele.ancho() , ele.altura()

    Obtener el ancho y alto de un elemento

  11. eles.layout(opciones)

    Establece un nuevo diseño para los nodos de la colección.

    var layout = this.cy.nodes('#j,#k,#l,#m,#n,#o,#p').layout({
      
      
    name: 'circle',
    animate: true,
    avoidOverlap: true,
    boundingBox: {
      
       x1:700, y1:250, x2:900, y2:500 },
});
layout.run(); //必须

  12. ele.seleccionado()

    Determinar si el elemento está seleccionado

  13. eles.select()

    Deselecciona un elemento. Los elementos fuera del conjunto no se ven afectados.

  14. eles.unselect()

    Deselecciona un elemento. Los elementos fuera del conjunto no se ven afectados.

Formas habituales de modificar estilos de elementos

  1. ellos.addClass()

    Agregar un nombre de clase al elemento

  2. ellos.removeClass()

    Quitar nombre de clase de elemento

  3. eles.toggleClass()

    Alterna si el elemento tiene el nombre de clase especificado.

    cy.edges('#ab').toggleClass('hovered') //如果元素有类名hovered，则移除该类名，如果没有，则添加该类名
cy.edges('#ab').toggleClass('hovered',true) //添加类名hovered
cy.edges('#ab').toggleClass('hovered',false) //移除类名hovered

  4. eles.estilo()

    Obtener o anular el estilo del elemento

  5. eles.removeStyle()

    borrar estilo

Métodos comunes para iterar, construir y filtrar

  1. eles.forEach()

    Iterar a través de los elementos de la colección.

    eles.forEach( function(ele, i, eles) [, thisArg] )
//ele 当前元素。
//i 当前元素的索引。
//eles 正在迭代的元素的集合。
//thisArg [可选] 迭代函数中的此值。

  2. ellos.eq(índice)

    Obtenga el elemento en un índice específico de la colección.

  3. eles.sort()

    Obtiene una nueva colección que contiene elementos ordenados por la función de comparación especificada.

  4. ellos.min()

    Encuentre el valor mínimo y el elemento correspondiente en una colección.

    eles.min( function(ele, i, eles) [, thisArg] )
//ele 当前元素。
//i 当前元素的索引。
//eles 正在迭代的元素的集合。
//thisArg [可选] 迭代函数中的此值。

    Esta función devuelve un objeto con los siguientes campos:

    {
      
      
	value: xxx, //找到的最小值。
	ele: xxxEle //对应于最小值的元素。
}

    Ejemplo: Encuentre el borde con el peso de borde más pequeño

    let weights = this.cy.edges().min(function(ele){
      
      
    return ele.data('weight');
})
console.log(weights); // {value: 1, ele: Element(1)}

  5. ellos.max()

    Encuentre el valor máximo y el elemento correspondiente.

Supongo que te gusta

Origin blog.csdn.net/weixin_44001906/article/details/127513732
Recomendado
Clasificación
Diario
Más
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)

Code World

© 2018 codetd.com