将 link 设置在背景图片后面并使其可点击 Cytoscape.js

Question

是否可以在背景图片后面设置一个 link 并使其对特定节点可点击？我在单独的 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": ""
    },
]
}**

感谢帮助

Answer 1

您可以轻松地按照文档中给出的两个示例进行操作：

有了这两个，让 link 工作真的很容易。我在这里创建了一个工作示例：

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>

这个站点似乎阻止了弹出窗口，这就是为什么 link 在这里可能不起作用，但作为证明，here 你可以在我的代码笔中看到它起作用。请随意在您的项目中实施此代码并在那里尝试。

将 link 设置在背景图片后面并使其可点击 Cytoscape.js

Set link behind background image and make it clickable Cytoscape.js

javascript

css

cytoscape.js