时间戳

首页 > 解决方案 > 关于 cytoscape.js 的几个问题

javascript - 关于 cytoscape.js 的几个问题

问题描述

我刚刚开始使用cytoscape（使用cytoscape-klay layout）来渲染一些图形，但我无法找到一些问题的答案：

  1. 有没有办法左对齐图表？（图表似乎水平居中，但在我的用例中，我需要它从左侧开始） 编辑：我的图表不可平移也不可缩放，panBy而且shift似乎不起作用
  2. 有没有办法在不指定容器尺寸的情况下渲染图形？（现在，如果我不指定尺寸，画布本身的尺寸为 0x0，并且由于我为每个节点指定了宽度/高度，我认为应该可以） 编辑：我不能使用绝对定位容器，因为我的观点有一些粘性部分。此外，我希望容器维度正是图表所需要的，因为它不可平移。我目前正在执行以下操作以适应 1 和 2：
const dim = cy.$('*').boundingBox(); // get real size of graph
const container = document.getElementById('#cy');
container.setAttribute('style', `width: ${dim.w - 120}px; height: ${dim.h}px; transform: translateX(-175px)`);
  1. 有没有办法在 css 文件中定义 css 还是必须在 js 中？ 编辑：我知道我可以使用 js/json 文件 - 我想知道我是否也可以使用 css 文件（我假设不是，但我只是想确保）
  2. 我的节点应该是交互式的（打开/关闭），因为我使用 Vue.js，所以我更喜欢将我的节点作为 Vue 组件。虽然这对于 cytoscape 本身来说似乎是不可能的，因为它只支持节点的标签，但我发现nodeHtmlLabel包让我非常接近，它不符合在 js 中设置的样式，反应性似乎是一个问题。有更好的选择吗？ 编辑：我不是在问复合节点。对于我需要的一个简单示例，您可以认为每个节点都有一个标题和一个描述，但只有标题是可见的，如果您单击节点，它将打开以显示描述（节点高度会改变）
  3. 我可以自定义边缘吗？（有一条由连接到贝塞尔曲线的直线组成的边缘，使用我自己的控制点等。）如果不是，这些权重/距离如何工作？它们是否同样适用于自上而下和左右图？（我试图有这样的东西）编辑 ：我知道当前的边缘类型，但我正在寻找一些是和之间合并的taxi东西bezier。由于目前不支持此功能，我想知道是否有任何方法可以自己定义自定义行

背景 - 我设法使用dagre-d3非常接近所需的设计，但我的排名有问题，而且似乎这个包没有维护 :(，因此我决定寻找替代方案

标签： javascriptgraphcytoscape.js

解决方案

推荐阅读