Question

我使用cytoscape.js显示节点之间的关系。我想为一个节点创建不同的时尚标签。我想要更复杂的时尚标签，然后在cytoscape.org official example。

我该怎么做？

我的问题的示例图片： Sample image of my problem

Answer 1

我通过扩展为cytoscape创建html标签解决了我的问题。

扩展演示：demo

cy.nodeHtmlLabel(
[
    {
        query: 'node',
        tpl: function(data){
        return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
    }
]
    );

.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}

Answer 2

首先，必须有一个区域来绘制图形。将标记添加到index.html，然后在body部分中添加一个名为＆＃34; cy＆＃34;的div元素，如下所示：。这会创建网页的主体，而网页又包含一个名为cy的div元素。命名元素可以方便以后访问和修改此元素以进行样式设置并传递给Cytoscape.js。

index.html现在应该是这样的：

<!doctype html>
<html>
<head>
    <title>Tutorial 1: Getting Started</title>
    <script src='cytoscape.js'></script>
</head>

<body>
    <div id="cy"></div>
</body>
</html>

接下来，必须通过CSS稍微修改图形区域的样式（将图形放入0区域div元素是相当无趣的）。要完成此操作，请在和之间添加以下CSS代码：

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

让图表看起来更漂亮怎么样？ Cytoscape.js提供了多种样式选项，用于更改图形外观。可以修改图形的初始化以更改默认样式选项，如下所示：

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b'
      }
    }],
    style: [
        {
            selector: 'node',
            style: {
                shape: 'hexagon',
                'background-color': 'red'
            }
        }]      
});

接下来是在图表中显示标签，以便可以识别节点。标签是通过样式的“标签”属性添加的。由于已经提供了标签（通过数据的id属性），我们将使用这些标签。如果提供了其他数据属性，例如firstname，则可以使用它们。

style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }]

Cytoscape.js中图表的最后一个常见组件是布局。与样式，元素和容器一样，布局也被指定为在构造期间传递给cytoscape的对象的一部分。对于现有的cy对象，添加（在元素之后）：

layout: {
    name: 'grid'
}

检查一下，它会对您有帮助 - http://blog.js.cytoscape.org/2016/05/24/getting-started/

如何将html标签添加到cytoscape图节点

2 个答案: