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(', '));