cytoscape.js - 节点间距

Question

我正在使用TypeScript创建cytoscape图表。我希望找到一种增加节点间距的方法。我尝试更改spacingFactor的值，但似乎没有改变任何东西。

- bdparrish

---

请您能提供更多的信息吗？您使用哪种布局？您有代码片段吗？谢谢 :) - Stephan T.

我编辑了我的回答，请查看并看看是否有帮助:) 谢谢 - Stephan T.

@StephanT. - 这些建议都没有起到帮助作用。我在图表中没有看到明显的变化。 - bdparrish

你是用哪种布局进行测试的？我自己测试了所有的布局，并且每个布局都能正常工作（如果你改变数值，图表会有相应的变化）。要么你使用了其他的布局，要么你使用了错误的数值... - Stephan T.

Answer 1

这取决于您使用的布局。以下片段向您展示如何使用spacingFactor属性，其他间距属性可以在官方文档中找到，通常这些东西很容易在那里找到。如果您指定要使用的布局，我也可以帮助您处理特定的布局。

Dagre:

this.cytoscape.layout({
  name: "dagre",
 spacingFactor: 12
}).run();

同心:

this.cytoscape.layout({
  name: "concentric",
  minNodeSpacing: 12
}).run();

概述：

this.cytoscape.layout({
  name: 'cose-bilkent',
  animate: false,
  idealEdgeLength: 200
});

传播：

this.cytoscape.layout({
   name: 'spread',
   minDist: 20
});

Klay:

不要使用Klay

- Stephan T.

---

我已经尝试了 cose、dagre、spread、concentric 和 klay，但似乎没有一个对 spacingFactor 的更改做出响应。这是我将其添加到代码中的方式...this.cytoscape.layout({ name: this.layout, spacingFactor: this.spacingFactor }).run(); - bdparrish

好的，你刚刚尝试了这个属性，比如说dagre有一个非常简单的解决方案（rankSep、nodeSep和edgeSep……）。我将编辑问题，并为每个布局提供相关属性，同时删除代码片段，但通常可以通过搜索文档并尝试不同的属性来实现这一点。 - Stephan T.