Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
cytoscape.js dot layout using viz.js
import Viz from 'viz.js';
import {Module, render} from 'viz.js/full.js.opaque';
function CytoscapeDotLayout(options) {
this.options = options;
}
CytoscapeDotLayout.prototype.run = function () {
let dotStr = 'digraph G {';
const nodes = this.options.eles.nodes();
for (let i = 0; i < nodes.length; ++i) {
const node = nodes[i];
const {w, h} = node.layoutDimensions(this.options);
dotStr += ` ${node.id()}[label="${node.id()}",fixedsize=true,width=${w / 100},height=${h / 100}];\n`;
}
const edges = this.options.eles.edges();
for (let i = 0; i < edges.length; ++i) {
const edge = edges[i];
dotStr += ` ${edge.source().id()} -> ${edge.target().id()};\n`;
}
dotStr += '}';
const viz = new Viz({Module, render});
viz.renderSVGElement(dotStr).then((svg) => {
const svgNodes = svg.getElementsByClassName('node');
const idToPositions = {};
let minY = Number.POSITIVE_INFINITY;
for (let i = 0; i < svgNodes.length; ++i) {
const node = svgNodes[i];
const id = node.getElementsByTagName('title')[0].innerHTML.trim();
const ellipse = node.getElementsByTagName('ellipse')[0];
const y = ellipse.cy.baseVal.value * 2;
idToPositions[id] = {
x: ellipse.cx.baseVal.value * 2,
y,
};
minY = Math.min(minY, y);
}
nodes.layoutPositions(this, this.options, (ele) => {
let {x, y} = idToPositions[ele.id()];
y -= minY - 30;
return {x, y};
});
});
return this;
};
export default function (cytoscape) {
cytoscape('layout', 'dot', CytoscapeDotLayout);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment