The project is actively developing. My idea is to compile the ogdf library into javascript using emscripten. Now the library is compiled to ogdf.js(WASM based) successfully. More details will be updated later.
You can see the layout performance in the random square graph and facebook network(use python -m http.server). They use the FM3 graph layout algorithm from the ogdf library and get a faster performance compared to some algorithms such as D3 force in the browser.
now I have writen two layout: FM3, Pviot MDS
initOGDF().then(function (Module) {
...
// we assume the nodes, links store the data similar to usage in d3.force
let nodes = graph.nodes.length
let links = graph.links.length
let source = Module._malloc(4 * links);
let target = Module._malloc(4 * links);
// store the edge information to wasm array
for (let i = 0; i < links; ++i) {
Module.HEAP32[source / 4 + i] = dic[graph.links[i].source];
Module.HEAP32[target / 4 + i] = dic[graph.links[i].target];
}
let result = Module._FM3(nodes, links, source, target);
// or: let result = Module._PMDS(nodes, links, source, target);
// get nodes position from result
for (let i = 0; i < nodes; ++i) {
graph.nodes[i]['x'] = Module.HEAPF32[(result >> 2) + i * 2]
graph.nodes[i]['y'] = Module.HEAPF32[(result >> 2) + i * 2 + 1];
}
...
Module._free(source);
Module._free(target);
Module._free_buf(result);
});- add PMDS algorithm
- use initOGDF to start which can use mutiple times in browser(better than Module onRuntime)