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

Question

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

我该怎么做？

我的问题的示例图片： 我的问题的示例图像

Answer 1

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

扩展到github： cytoscape-node-html-label

扩展演示：演示

 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部分中添加一个名为“cy”的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 个解决方案

解决方案1
6 2017-08-24 17:39:00

解决方案2
0 2017-08-13 10:07:58

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

问题描述

2 个解决方案

解决方案1 6 2017-08-24 17:39:00

解决方案2 0 2017-08-13 10:07:58

解决方案1
6 2017-08-24 17:39:00

解决方案2
0 2017-08-13 10:07:58