Cytoscape.js，在边缘顶部放置标签文本-6ren

Cytoscape.js，在边缘顶部放置标签文本

转载作者：行者123 更新时间：2023-12-04 13:17:56

28

4

我有一个标签，它是与边缘内联绘制的，因此渲染效果不佳。有没有办法在边缘文本中添加背景形状之类的东西，以便在标签区域看不到边缘线？

最佳答案

您可以在初始化 cytoscape 样式表时向标签添加类:

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        "label": "data(label)",
        "text-valign": "center",
        "text-halign": "center",
        "height": "60px",
        "width": "60px"
      }
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: "edge[label]",
      css: {
        "label": "data(label)",
        "text-rotation": "autorotate",
        "text-margin-x": "0px",
        "text-margin-y": "0px"
      }
    },
    {
      selector: ".background",
      css: {
        "text-background-opacity": 1,
        "color": "#fff",
        "text-background-color": "#000"
      }
    },
    {
      selector: ".outline",
      css: {
        "color": "#fff",
        "text-outline-color": "#000",
        "text-outline-width": 3
      }
    },
    {
      selector: ".top-center",
      style: {
        "text-valign": "top",
        "text-halign": "center"
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: '1',
          label: 'outline'
        },
        classes: 'outline'
      },
      {
        data: {
          id: '2',
          label: 'background'
        },
        classes: 'background'
      },
      {
        data: {
          id: '3',
          label: 'top-center'
        },
        classes: 'top-center'
      },
      {
        data: {
          id: '4',
          label: 'none'
        }
      }
    ],
    edges: [{
        data: {
          source: "1",
          target: "2",
          label: "outline"
        },
        classes: "outline"
      },
      {
        data: {
          source: "2",
          target: "3",
          label: "background"
        },
        classes: "background"
      },
      {
        data: {
          source: "3",
          target: "4",
          label: "top-center"
        },
        classes: "top-center"
      },
      {
        data: {
          source: "4",
          target: "1",
          label: "none"
        }
      }
    ]
  },
  layout: {
    name: "circle"
  }
}));

cy.ready(function() {
  cy.layout({
    name: "circle"
  }).run();
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>

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

</html>

关于Cytoscape.js，在边缘顶部放置标签文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58136352/

28

4

0

文章推荐： bash - 在 WSL 上从 Bash 打开 Sublime Text

文章推荐： html - 如何在文本上使用 css 背景过滤器？

文章推荐： php - Laravel 从 5.6 升级到 Laravel 6

cytoscape.js - 如何让 Cytoscape.js 像 Cytoscape 创建的那样自动创建布局？
在使用 Cytoscape.js 之前，我使用 Cytoscape 进行生物网络可视化。 Cytoscape 能够使用其内部放置算法从我们的网络文件创建自动布局。布局放置非常合理---相互连接的节点就
cytoscape.js - cytoscape 以动画路径显示节点之间的流量
我需要显示沿着连接路径在节点之间移动的事物，类似于 this project 。我在 cytoscape 中找不到任何相关示例，但我过去曾使用过 cytoscape，并且更愿意继续使用它。我希望得到有
cytoscape - 如何在 Cytoscape 中单独更改节点的颜色？
在节点的样式 View 中，如果我更改标签设置中的颜色，它会更改所有节点的所有颜色。我想控制每个节点的颜色。我怎样才能做到这一点？感谢您的帮助。最佳答案有两种方法。首先，您可以创建一个包含颜色值或
cytoscape - 如何在 Cytoscape 中单独更改节点的颜色？
在节点的样式 View 中，如果我更改标签设置中的颜色，它会更改所有节点的所有颜色。我想控制每个节点的颜色。我怎样才能做到这一点？感谢您的帮助。最佳答案有两种方法。首先，您可以创建一个包含颜色值或
cytoscape.js - 节点上的内容和标签 - Cytoscape
我正在尝试使用“内容”和下方的文本标签来显示在节点中心具有字体图标的节点。我的造型目前是: { 'selector': 'node[icon]', 'style': { 'conte
cytoscape.js - Cytoscape 仅动态设置最后添加的节点样式
我正处于使用 Cytoscape.js 的开始阶段，我正在尝试为我的 dagre-layout 树设置最后添加的节点的样式。对于上下文，我尝试在进行 Git 提交时可视化 Git 工作流程。树上的当
cytoscape.js - Cytoscape js单击节点时如何获取所有边(文本标签)
我知道我可以使用 node.connectedEdges() 返回连接到该节点的边的对象。如何访问所有边缘的数据字段。我希望能够单击一个节点并在列表中包含连接的边标签(文本)。此外，当您单击一个节点
cytoscape-web - Cytoscape.js 力导向布局和节点放置
我最近发现了 Cytoscape.js 并想尝试强制导向布局:arbor 和 springy。现在，我有几个问题: 是否可以通过使用其中一种布局来实现图形，其中节点放置基于某种算法并且节点坐标不是必
cytoscape.js - 在 cytoscape 中显示和隐藏鼠标悬停时的节点信息
我正在浏览器中处理 cytoscape.js 图。当鼠标悬停在细胞景观图中的节点上时，我想显示节点的一些信息(例如节点标签)。以下代码适用于 console.log()但我想在浏览器中显示信息: cy
cytoscape.js - 如何使用 Cytoscape 将文本包裹在形状内？
我正在尝试使用 Cytoscape 构建图块。基本上，每个矩形(瓷砖)都有一个标题，我希望它写在该矩形的范围内。我的代码是: var cy = cytoscape({ container: d
cytoscape.js - cytoscape.js 中复合节点内的子节点定位
使用 cytoscape.js 使用复合节点绘制图形。需要将内部节点(即子节点)定位到复合节点的特定位置(例如左、右、上、下等)。有什么办法可以做到这一点吗？最佳答案此功能计划在 2.4 中使用:
cytoscape.js - 如何从 Cytoscape 获取图形布局对象？
我在 Cytoscape.js 中有一个图表，用户可以在其中在默认布局(圆形)和可乐布局之间切换。我还有一个功能，他们可以根据节点和边 ID 搜索和过滤图表。我希望应用程序能够知道用户当前使用的布局并
cytoscape.js - Cytoscape JS - 初始化后修改容器高度
我用如下所示的内容初始化 Cytoscape: var cy = cytoscape({ container: $('#my-element'), height: 500px });
cytoscape.js - Cytoscape JS - 初始化后修改容器高度
我用如下所示的内容初始化 Cytoscape: var cy = cytoscape({ container: $('#my-element'), height: 500px });
cytoscape.js - 动态处理添加节点的布局 (cytoscape.js)
这是我正在做的一个例子: function showNeighbors(ele) { cy.add(this.cyData.getElementById(ele.id()).neighborhoo
cytoscape.js - 在 cytoscape.js 中的节点上方添加额外信息
使用 cytoscape.js 绘制图形。我需要在右上角的节点上方添加圆圈。画好图后，有没有可以获取节点位置的API？此外，我使用了如下代码: 元素:{ 节点:[{ 数据 : { 编号:'1'，名
cytoscape.js - 我如何使类在 Cytoscape.js 中工作
我正在尝试向节点添加一个类，将我所有的 css 放在一个样式表文件中，而不是在 javascrpt 声明中。 var values = { nodes: [ { data: {
cytoscape.js - 避免 cytoscape.js 中的边缘节点重叠
使用 cytoscape.js 创建图表。我已将布局设置为“网格”。需要解决以下问题:原图- 从Host3到Host1以及从Host5到host1有边，从Host5到Host1的边与从Host3到Ho
cytoscape.js - 在 cytoscape.js 中导出选定的节点和边
有没有一种方法可以从图中导出选定的节点和边，并在另一个图中显示选定的节点和边。 maxkfranz 说我们可以导出为json。你知道我怎么做吗？谢谢。最佳答案您是否尝试过以下内容: cy.$(':
cytoscape.js - 如何锁定 cytoscape.js 节点在其父节点中的位置
我想锁定一个节点相对于其父复合节点的位置，这样如果我捕获并拖动父节点，子节点就会随之移动，但不能单独抓取子节点。如果我将 child 设置为不可抓取和/或锁定，则它不会随其父移动，但如果我不移动，则可

首页

博学

6Ren·AI

商城

Cytoscape.js，在边缘顶部放置标签文本