显示cytoscape.js中节点之间的关系类型 [英] Show the kind of relation between nodes in cytoscape.js

问题描述

我正在寻找一种软件，它允许我通过自动绘图和用户交互来绘制实体之间的关系。我已经看到了cytoscape.js，它似乎是一个非常好的选择，但我想知道，如果用这个软件，你可以看到关系的名称。

目标这个例子是画两个人，并显示他们的关系，例如，他们是兄弟。

Person1 ======兄弟=====> Person2

我需要修改代码吗？

解决方案

你不需要修改代码。此功能已内置。您需要知道如何使用映射器和 cytoscape样式表定义。

如果你看看他们使用的演示源， here ，你会发现当你定义cytoscape css风格时，你需要设置 content 属性，然后您可以使用映射器并指定要显示的节点/边缘数据中的哪个属性。这已经通过节点的 id 属性完成，如下所示：

  style：cytoscape.stylesheet（）
 .selector（node）
 .css（{
content：data（id），
shape：数据（形状），
border-width：3，
background-color：#DDD，
border-color：＃555，
 
 
 
 
 $ p 
 
 
 
 
 
 
 
 
 $ b希望这有助于您。 / p> 
I am looking for a software that allows me to draw relations between entities with automatic drawing and with user interaction. I have saw cytoscape.js and it seems like a really good option, but I want to know if with this software you can visualize the name of the relations.

The objetive of the example is to draw two persons and show their relation, for example, that they are brothers.

Person1 ====== brother =====> Person2

Do I need to modify the code to do this?
解决方案
You don't need to modify the code. This functionality is already built in. You will need to know how to use the mappers and cytoscape stylesheet definitions. 

If you take a look at the source of the demo that they used here, you'll see that when you're defining the cytoscape css style, you need to set the content attribute which you could then use the mappers and specify which attribute in the node/edge data you'd like to display. This is already done with the id attribute for nodes as follows:
style: cytoscape.stylesheet()
  .selector("node")
        .css({
            "content": "data(id)",
            "shape": "data(shape)",
            "border-width": 3,
            "background-color": "#DDD",
            "border-color": "#555",
        })
You can do the exact same for edges
Hope this helps.

                        
这篇关于显示cytoscape.js中节点之间的关系类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！