Cytoscape，尝试显示图片而不是节点

Question

我正在尝试使用Cytoscape.js创建网络图谱时，用图像代替节点进行显示，但是我还没有成功。我从Images and 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”值。以下是类的定义...

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

我测试了“shape-database”类是否能正常工作，通过在页面上添加一个简单的div，这个类在普通的div上可以正常工作。但是，我给cyto节点添加了classes属性后，它并没有显示背景图片。看起来好像类没有应用到节点上，或者节点在某种程度上阻止了图片的显示。这与我之前使用的代码完全相同，除了删除了所有节点选择器CSS属性，只保留了宽度和高度，并且移除了#order-db CSS选择器。对于节点，我只看到一个灰色的圆形。

当元素的classes属性没有起作用时，我甚至尝试了以下方法，但均无效...

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

有没有想法我做错了什么？提供一个只显示图片而不是节点的示例链接也会有帮助。

- Tim Hardy

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

- Tim Hardy

---

我刚刚确认了类与背景图片的正常工作。我不确定你在样式表中做了什么。至于文档中background-opacity的描述，它是这样写的：“节点背景颜色的不透明度级别。”有没有关于如何改进措辞的建议？谢谢。 - maxkfranz

我想解释一下，这个属性与背景的不透明度无关。你的描述让人觉得它影响了节点后面的透明度/不透明度，但实际上它定义了节点本身的不透明度。需要介绍一些术语来解释，必须将此值设置为零才能看到背景图像。也许我只是以不同的方式考虑结构，但我认为节点在其背景前面，而背景是在节点后面的东西。描述标记的部分可能会有所帮助。 - Tim Hardy