javascript - 细胞景观中的边缘可以有多种颜色吗-6ren

javascript - 细胞景观中的边缘可以有多种颜色吗

转载作者：行者123 更新时间：2023-12-04 10:53:28

27

4

我正在尝试创建具有多种颜色的边缘，不知道如何去做。
理想情况下，链接的每一半都会独立更新它们的颜色。

想知道这是否可行。
非常感谢
:)

最佳答案

看起来是的!查询 https://js.cytoscape.org/#style/edge-line和 https://js.cytoscape.org/#style/gradient .

策略是将线条渐变分成颜色停止位置，每个位置都有一个相关的颜色，如下所示:

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),
  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        "label": "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        "background-color": "data(faveColor)"
      }
    },
    {
      selector: "edge",
      css: {
        "line-fill": "radial-gradient",
        "line-gradient-stop-colors": "red green blue",
        "line-gradient-stop-positions": "25 50 75"
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: "a",
          faveColor: "#2763c4"
        }
      },
      {
        data: {
          id: "b",
          faveColor: "#37a32d"
        }
      },
      {
        data: {
          id: "c",
          faveColor: "#37a32d"
        }
      }
    ],
    edges: [{
        data: {
          source: "a",
          target: "b"
        }
      },
      {
        data: {
          source: "a",
          target: "c"
        }
      }
    ]
  },
  layout: {
    name: "dagre"
  }
}));

cy.ready(function() {
  cy.dblclick();
});

var nid = 0;
cy.bind('dblclick', function(evt) {
  console.log('dblclick');
  cy.add({
    group: 'nodes',
    data: {
      id: nid,
      faveColor: 'red'
    },
    position: {
      x: evt.x,
      y: evt.y
    }
  });
  nid++;
});

cy.bind('click', 'node', function(evt) {
  console.log('node clicked: ', evt.target.id());
});

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

#cy {
  height: 100%;
  width: 100%;
  float: right;
  position: absolute;
}

<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://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
  <script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>

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

</html>

关于javascript - 细胞景观中的边缘可以有多种颜色吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59350336/

27

4

0

文章推荐： python - 左合并两个数据框并仅填充 Pandas 中的 NaN 值

文章推荐： Django 3.0 值错误

文章推荐： aframe - 我的 GLB 模型未加载 A-Frame 1.0.0

javascript - “私有(private)”细胞
我想知道是否有任何方法可以将单元格“提供”给 Google 电子表格中的某人？我有一个电子表格，任何人都可以编写他们想要的内容，任何人都可以编辑他们想要的内容。我想添加一个功能，使得只有单元格的“作者
c# - EPPLUS AutoFit 细胞
我如何根据一个输入的最大长度设置单元格的自动调整大小。 using (rng = workSheet.Cells["A1:G1"]) { rng.Style.Font.Bold = true;
ios - 展示原型(prototype)细胞
如果我想在 Objective-C 中创建一个 TableView ，每个单元格都以不同的方式定制，我会创建多个原型(prototype)单元格，对其进行定制，然后为每个单元格设置自己的标识符。然后我
ios - 细胞 View 的角半径
我正在使用平板电脑 View 并且我的表格 View 是分组的。我使用单个原型(prototype)单元格。在我的单元格中，我使用 UIView 并且只想将第一个单元格 View 设置为顶部，最后一个
html - 如何定位最后一个 TD 细胞？
如何让特定的 TD 不继承表格的 CSS 样式？我应该如何使最右边的列完全没有任何背景？ table { font-family:Arial, Helvetica, sans-serif;
不同大小的 Python Pandas 细胞
我目前正在开发一个小项目 (Python 3.6.2)，用于根据我从大学网站上抓取的输入自动创建时间表。为了创建时间表和存储约会(以及稍后重新组织它们，以找到“更好”的时间表)，我目前使用 Panda
python - 将一个数组的一个元素变成两个然后删除原来的(细胞 split 模拟)
我想使用 python 数组模拟基本的细胞 split 。我有 u，它是一个数组，定义如下: n=2 #number of elements that can describe each cell N
ipython-notebook - Markdown 细胞 latex 产生不需要的垂直条
渲染 Markdown 单元格时，在 latex 部分之后会显示垂直条。有什么办法可以去掉这些吗？例如，markdown 单元格中的以下代码: $\left[ \begin{array}{cccc}
verilog - 用 Yosys 生成 TIE 细胞？
我正在使用 Yosys综合我的 RTL 设计，其中包括几个文字常量，例如绑定(bind)输出端口，如下代码所示: module my_module ( input a, input b
javascript - 如何在 IgGrid 细胞(Infragistics)中获得正则表达式？
如何在 igGrid 更新中的 igTextEditor 上使用正则表达式？我尝试使用验证选项，但它没有用。 $("#schedulerTable").igGrid({
machine-learning - 细胞/单元之间的 LSTM 连接(不是时间步长)
我的问题是关于如何构建 LSTM 层，例如在 keras 中: keras.layers.LSTM(units,... other options) 这些单位是单个细胞还是细胞状态的维度？我读过有关
html - R Shiny selectedInput inside renderDataTable 细胞
我寻找将 selectedInputs 放入 renderDataTable 单元格的解决方案。我找到了 js 解决方案:https://datatables.net/examples/api/for

首页

博学

6Ren·AI

商城

javascript - 细胞景观中的边缘可以有多种颜色吗