Установите ссылку позади фонового изображения и сделайте ее интерактивной Cytoscape. js - PullRequest
Новая
       35

Установите ссылку позади фонового изображения и сделайте ее интерактивной Cytoscape. js

1 голос
/ 06 мая 2020

Можно ли установить ссылку за фоновым изображением и сделать ее кликабельной для определенных c узлов? Я использую стиль и элементы в отдельных файлах json.

вот моя реализация: 

{
        "selector": ".myImage",
        "css": {
          "background-image": "https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg",
          "background-width": "17px",
          "background-image-opacity": 0.8,
          "background-height": "15px",
          "background-position-x": "50%",
          "background-position-y": "0",
          "padding": "5px",
          "background-clip": "none",
          "background-fit": "none"
        }
      },

} 

**{

"elements": [
    {
      "data": {
        "id": "node1",
        "href": "https://js.cytoscape.org/#style"
      },
      "position": {
        "x": 50,
        "y": 300
      },
      "group": "nodes",
      "removed": false,
      "selected": false,
      "selectable": false,
      "locked": true,
      "grabbable": true,
      "classes": ""
    },
]
}**

спасибо за помощь

1 Ответ

3 голосов
/ 09 мая 2020

Вы можете легко следовать двум примерам, приведенным в документации:

С этими двумя действительно легко заставить ссылку работать. Я создал здесь рабочий пример: 

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  style: [{
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        height: "60px",
        width: "60px",
        "border-color": "black",
        "border-opacity": "1",
        'background-fit': 'cover',
        "border-width": "10px"
      }
    },
    {
      selector: "node[href]",
      css: {
        content: '',
        'background-image': 'https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      }
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle"
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "n0",
          href: "https://js.cytoscape.org/#collection"
        }
      },
      {
        data: {
          id: "n1",
          href: "https://js.cytoscape.org//#demos"
        }
      },
      {
        data: {
          id: "n2",
          href: "https://js.cytoscape.org/"
        }
      },
      {
        data: {
          id: "n3",
          href: "https://js.cytoscape.org//#notation"
        }
      },
      {
        data: {
          id: "n4",
          href: "https://js.cytoscape.org/"
        }
      },
      {
        data: {
          id: "n5"
        }
      },
      {
        data: {
          id: "n6",
          href: "https://js.cytoscape.org/#core"
        }
      },
      {
        data: {
          id: "n7",
          href: "http://cytoscape.org"
        }
      },
      {
        data: {
          id: "n8"
        }
      },
      {
        data: {
          id: "n9"
        }
      },
      {
        data: {
          id: "n10",
          href: "https://js.cytoscape.org/#notation"
        }
      },
    ],
    edges: [{
        data: {
          source: "n0",
          target: "n1"
        }
      },
      {
        data: {
          source: "n1",
          target: "n2"
        }
      },
      {
        data: {
          source: "n1",
          target: "n3"
        }
      },
      {
        data: {
          source: "n4",
          target: "n5"
        }
      },
      {
        data: {
          source: "n4",
          target: "n6"
        }
      },
      {
        data: {
          source: "n6",
          target: "n7"
        }
      },
      {
        data: {
          source: "n6",
          target: "n8"
        }
      },
      {
        data: {
          source: "n8",
          target: "n9"
        }
      },
      {
        data: {
          source: "n8",
          target: "n10"
        }
      }
    ]
  },

  layout: {
    name: "dagre",
    padding: 5
  }
}));


cy.on('tap', 'node', function() {
  if (this.data('href')) {
    try { // your browser may block popups

      window.open(this.data('href'));
    } catch (e) { // fall back on url change
      window.location.href = this.data('href');
    }
  }
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

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

...