如何应用cytoscape cose布局

时间:2018-11-09 13:34:18

标签: javascript cytoscape.js

我正在尝试使用cytoscape绘制图形以将其渲染到其他位置。为此,我在无头模式下使用它,并尝试将cose布局应用于4个节点和3个边的图形。

一个节点是锁定的,不应移动,而其他3个节点是可移动的,并且仅连接到锁定的节点。我假设它们最终将在锁定节点周围形成一个三角形,但它们的位置完全不变。

这是我的代码:

function print() {
  console.log(movableElements);
}

const cy = cytoscape({
  headless: true,
});

const movableElements = [];

let i = 0;
for (; i < 3; ++i) {
  movableElements.push({
    data: {
      id: `movable_${i}`
    },
    position: {
      x: 0,
      y: i
    },
    group: 'nodes',
    locked: false
  })
}

const lockedElements = [{
  data: {
    id: 'locked'
  },
  position: {
    x: 0.5,
    y: 0.5
  },
  group: 'nodes',
  locked: true
}];

i = 0;
const edges = [];
for (; i < 3; ++i) {
  edges.push({
    data: {
      source: `locked`,
      target: `movable_${i}`,
    },
    group: 'edges'
  })
}

cy.add(lockedElements);
cy.add(movableElements);
cy.add(edges);

console.log("Before:");
print();

const options = {
  name: 'cose',
  ready: () => true,
  stop: function() {},
  animate: false,
  idealEdgeLength: () => 0.01,
  edgeElasticity: () => 32,
  nodeOverlap: 1,
  refresh: 0,
  fit: false,
  padding: 0,
  boundingBox: undefined,
  componentSpacing: 0,
  nodeDimensionsIncludeLabels: false,
  randomize: false,
  numIter: 1000,
};
cy.layout(options);

console.log("After:");
print();
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.20/cytoscape.js"></script>

为什么什么也没发生,也许有一种方法可以查看潜在的错误消息?

0 个答案:

没有答案