css - Cytoscape，试图显示图像而不是节点

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 使用唯一的选择器不是很可扩展或易于修改。我更喜欢声明式方法，其中数据元素的属性决定要显示的图像。我尝试在一个元素上使用“classes”属性，并向它添加了一个“shape-database”值。这是类的定义方式...

.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

显示图像而不是节点:

这里的关键是完全隐藏节点背景和边框，以便背景图像单独显示出来。实现这一点的关键是通过样式对象上的“background-opacity”和“border-opacity”(或“border-width”)。我向数据对象添加了一个图像属性(值是一个 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 硬编码唯一的样式和图像。

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

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