Cystoscape，尝试显示图像而不是节点

Question

我正在尝试使用 Cytoscape.js 显示图像而不是节点来创建网络图，但我还没有成功。我从图像和广度优先示例 (https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5) 开始，但有几个关键的事情我想改变。

对于初学者，我只想显示图像而不是节点。上面的示例显示了一个圆形节点，其中包含一个图像。有什么方法可以让节点完全透明，让图像显示出来？我只想看看我的矢量图标图像。当我删除除宽度和高度之外的节点选择器的所有样式属性时，我仍然看到一个限制我的图像的圆圈。我只是想看看我的形象。

接下来，我想在元素数据上使用一些东西来决定使用什么图像，而不是上面示例中的#nodeId 机制。

.selector('#order-db')
      .css({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })

为每个 id 使用唯一的选择器不是很容易扩展或修改。我更喜欢声明性方法，其中数据元素上的属性确定要显示的图像。我尝试在一个元素上使用“类”属性，并向它添加了一个“形状数据库”值。这是类的定义方式...

.shape-database {
    width: 95px;
    height: 95px;
    /*background: url('images/network-icons.jpg') 0px -95px;*/
    background: url('images/database-5-med.png');
}

然后我通过向页面添加一个简单的 div 来测试“shape-database”类是否正常工作，并且该类在普通 div 上正常工作。我添加了 classes 属性的细胞节点不显示背景图像。就好像该类没有应用于节点，或者节点以某种方式阻塞了图像。这与我在上面使用的代码完全相同，除了宽度和高度外，所有节点选择器 css 属性都被删除，#order-db css 选择器被删除。我只看到节点的灰色圆圈。

当元素上的classes属性不起作用时，我什至尝试了以下无济于事...

cy.$('#order-db').addClass('shape-database');

对我做错了什么有什么想法吗？指向仅显示图像而不是节点的示例的链接也会有所帮助。

Answer 1

显示图像而不是节点：

这里的关键是完全隐藏节点背景和边框，让背景图像单独显示出来。实现这一点的关键是通过样式对象上的“背景不透明度”和“边框不透明度”（或“边框宽度”）。我为数据对象添加了一个图像属性（值是一个 img src），用于我想用图像换出的每个元素，以及以下样式。

{
    selector: 'node[image]',
    style: {
        'background-image': 'data(image)', // specify some image
        'background-opacity': 0, // do not show the bg colour
        'border-width': 0, // no border that would increase node size
        'background-clip': 'none' // let image go beyond node shape (also better performance)
    }
}

这也满足了我的要求，即使用元素数据来指定哪些元素将被图像替换以及使用哪些图像，而不是为每个元素 ID 硬编码独特的样式和图像。

我从来没有让 classes 数据属性对节点的背景图像产生任何影响。也许那里有一个错误。

希望这对将来的某人有所帮助，因为对我来说背景不透明度等使整个节点不可见对我来说并不明显。从文档来看，这听起来像是影响了节点的背景。知道我正在更改节点的背景图像，这让我对节点和背景感到相当困惑。我对所有图层以及它们如何交互仍然很模糊，但上述方法有效并且在我看来比 cytoscape 网站上给出的图像示例更好。