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使用唯一的选择器不具有很高的可扩展性或易于修改。我更喜欢声明式方法，其中数据元素上的属性确定要显示的图像。我尝试使用＆＃34;类＆＃34;元素上的属性，我添加了一个＆＃34;形状数据库＆＃34;它的价值。以下是该类的定义方式......

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

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

当元素上的classes属性不起作用时，我甚至尝试了以下无效...

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

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

Answer 1

显示图像而不是节点：

这里的关键是完全隐藏节点背景和边框，以便单独显示背景图像。实现这一目标的关键是通过＆＃34;背景不透明度＆＃34;和＆＃34;边界不透明＆＃34; （或＆＃34; border-width＆＃34;）在样式对象上。我为数据对象添加了一个图像属性（值为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显示图像而不是节点

1 个答案: