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

Question

我正在尝试使用 Cytoscape.js 显示图像而不是节点来创建网络图，但我还没有取得任何成功。我从图像和 breadthfirst 示例 (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" 值。以下是 class 的定义...

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

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

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

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

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

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 网站上给出的图像示例更好。

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

Cystoscape, trying to display images instead of nodes

css

image

cytoscape.js