d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
92 lines (85 loc) • 1.57 kB
HTML
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/@hpcc-js/wasm/dist/graphviz.umd.js" type="javascript/worker"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var shapes = [
"box",
"polygon",
"ellipse",
"oval",
"circle",
"point",
"egg",
"triangle",
"none",
"plaintext",
"plain",
"diamond",
"trapezium",
"parallelogram",
"house",
"pentagon",
"hexagon",
"septagon",
"octagon",
"note",
"tab",
"folder",
"box3d",
"component",
"cylinder",
"rect",
"rectangle",
"square",
"doublecircle",
"doubleoctagon",
"tripleoctagon",
"invtriangle",
"invtrapezium",
"invhouse",
"underline",
"Mdiamond",
"Msquare",
"Mcircle",
/* biological circuit shapes, as specified by SBOLv*/
/** gene expression symbols **/
"promoter",
"cds",
"terminator",
"utr",
"insulator",
"ribosite",
"rnastab",
"proteasesite",
"proteinstab",
/** dna construction symbols **/
"primersite",
"restrictionsite",
"fivepoverhang",
"threepoverhang",
"noverhang",
"assembly",
"signature",
"rpromoter",
"larrow",
"rarrow",
"lpromoter",
/* *** shapes other than polygons *** */
"record",
"Mrecord",
"epsf",
"star",
];
dotSrc = 'graph {\n';
for (i in shapes) {
dotSrc += ' ' + shapes[i] + ' [shape="' + shapes[i] + '"]\n';
}
dotSrc += '}';
d3.select("#graph").graphviz()
.engine('circo')
.renderDot(dotSrc);
</script>