Cytoscape.js预设布局文档 [英] Cytoscape.js Preset Layout Documentation

问题描述

我有一个渲染的cytoscape.js图.我对利用预设布局放置节点感兴趣.cytoscape.js文档为预设布局显示了以下内容:

I have a cytoscape.js graph that renders. I'm interested in leveraging the preset layout to place the nodes. The cytoscape.js documentation shows the following for the preset layout:

var options = {
  name: 'preset',
  positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
  zoom: undefined, // the zoom level to set (prob want fit = false if set)
  pan: undefined, // the pan level to set (prob want fit = false if set)
  fit: true, // whether to fit to viewport
  padding: 30, // padding on fit
  animate: false, // whether to transition the node positions
  animationDuration: 500, // duration of animation in ms if enabled
  animationEasing: undefined, // easing of animation if enabled
  ready: undefined, // callback on layoutready
  stop: undefined // callback on layoutstop
};

有人可以帮助我理解或举例说明文档中的以下内容

Can some one help me understand or give an example of what the documentation means when it says the following

// map of (node id) => (position obj); or function(node){ return somPos; }

我将所有节点存储在带有以下列的MySQL数据库表中

I store all the nodes in a MySQL database table with the following columns

id，起点，目的地，x位置，y位置

cytoscape.js位置是否采用了像这样的字典:

Does the cytoscape.js positions take a dictionary that looks like this:

{'id':1，{'x':10，'y':45}}，{'id':2，{'x':21，'y':32}} 等?

推荐答案

这意味着当 positions 设置为 undefined 时，您需要创建一个函数来获取位置每个节点.

This means when the positions is set as undefined you need to create a function to get the positions of each node.

例如:

 cy.nodes().forEach(function(n){
    var x = n.data("x");
    var y = n.data("y");
 });

此应该返回您的节点位置.

编辑

您可以在创建节点位置时对其进行设置.例如:

You can set the node position when you are creating it. For example:

  var elements;
  elements: [{"data":{"id":"yourID","name":"name"},"position"{"x":"0.0","y":"0.0"}}];

有关更多信息，请参见Cytoscape js网站上的此演示.他们在这里手动设置位置.

For more, see this Demo on Cytoscape js site. Here they set the position manually.

这篇关于Cytoscape.js预设布局文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！