ogma

Ogma是Linkurious的JavaScript图形可视化库。Ogma的一个实例是一个javascript对象，它在内部存储一个图形， 并根据样式规则在HTML容器中呈现它。

Ogma有两个版本：

• ogma.min.js标准版
• ogma.dist.min.js包含Ogma和所有可选的依赖项

客户端

单个HTML页面

在单页面应用程序中，Ogma可以作为脚本导入：

<!-- Import Ogma -->
<script src="path/to/ogma.min.js"></script>

<!-- Import Ogma and all optional dependencies-->
<script src="path/to/ogma.dist.min.js"></script>

图形

图表包含通过关系（边缘）彼此连接的实体（节点）。每个节点和边缘都嵌入了一个可用于存储自定义属性的数据对象。

除了用于操作内部图形的API之外，Ogma还提供了便捷的函数来生成随机图形，导入图形和连接到外部数据源。

// Import a graph from a file and set it as ogma's internal graph.
ogma.parse.jsonFromUrl('data/myfile.json').then(function (rawGraph) {
  ogma.setGraph(rawGraph);

  // Retrieve the nodes from the 'Customer' category.
  // 'Category' is a property stored in the node's data object.
  var customers = ogma.getNodes().filter(function (node) {
    return node.getData('Category') === 'Customer';
  });

  // Print the customers's names to the console.
  // 'name' is a property stored in the node's data object.
  console.log(customers.getData('name').join());
});

HTML容器

Ogma的一个实例绑定到一个HTML容器（通常是一个

元素）保存图形可视化。这种绑定可以在Ogma的构造函数中进行，也可以稍后使用ogma.setContainer（）函数进行。以下代码段是等效的：

 

var ogma = new Ogma({
  container: 'graph-container'
});

相当于：

var ogma = new Ogma();
ogma.setContainer('graph-container');
Ogma公开了一个API来访问和修改其内部图。这些函数使用Node，Edge，NodeList和EdgeList格式的节点和边。

创建节点和边

让我们在图中添加一些节点和边。请注意，必须在边之前添加节点。当添加或删除许多节点或边缘（超过1,000）时，使用批处理函数（例如ogma.addNodes（））比使用它们各自的对应物（例如ogma.addNode（））更高效。

// Manually create nodes
ogma.addNodes([
  {id: 'john', data: {name: 'John Doe', age: 55}},
  {id: 'jane', data: {name: 'Jane Doe', age: 55}},
  {id: 'john_jr', data: {name: 'John Doe Jr', age: 15}},
  {id: 'jane_jr', data: {name: 'Jane Doe Jr', age: 18}},
]);

ogma.addEdges([
  {id: 'e1', source: 'john_jr', target: 'jane', data: {name:'parent'}},
  {id: 'e2', source: 'jane_jr', target: 'jane', data: {name:'parent'}},
  {id: 'e3', source: 'john', target: 'jane', data: {name:'spouse'}},
]);

访问节点和边缘

函数ogma.getNode（）和ogma.getNodes（）（resp。ogma.getEdge（）和ogma.getEdges（））从Ogma的内部图中检索节点（相应的边）。可以链接这些函数以遍历图形并收集符合特定条件的节点。

// Get node by id.
// nJohnJr is a Node object.
var nodeJohnJr = ogma.getNode('john_jr');

// Get nodes by id.
// parents is a NodeList object.
var parents = ogma.getNode(['john', 'jane']);

// Get all edges
// addEdges is an EdgeList object.
var addEdges = ogma.getEdges();

// Get the children of Jane
var neighbors = ogma.getNode('jane')
  .getAdjacentEdges()
  .filter(function(edge) {
    return edge.getData('name') === 'parent';
  })
  .getSource();

自定义数据

边和节点也可以存储自定义数据（在data属性中）。可以ogma.getData(propertyName)使用Node，Edge，NodeList和EdgeList对象可用的功能检索自定义数据。让我们检索匹配特定条件的节点，然后将它们的名称打印到控制台。

// Store all nodes with an age property above 50 in an NodeList object.
var youngsters = ogma.getNodes().filter(function(node) {
    return node.getData('age') > 50;
});

console.log(youngsters.getData('name').join(', '));