mermaid

<!DOCTYPE html> <html> <head> <title>sentence-tokenization.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../../../doc-style.css" /> <script src="../../../doc-filelist.js"></script> <script> var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/bower_components/dagre-d3/demo/sentence-tokenization.html", defaultSidebar = true; </script> <script src="../../../doc-script.js"></script> <script src="../../../mermaid.js"></script> <link rel="stylesheet" href="../../../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#sentence-tokenization.html">sentence-tokenization.html</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="sentence-tokenization.html"> <h1> <a href="#sentence-tokenization.html" name="sentence-tokenization.html" class="pilcrow">¶</a>sentence-tokenization.html </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> </td> <td class="code highlight"><div class="highlight"><pre><!doctype html> <meta charset="utf-8"> <title>Dagre D3 Demo: Sentence Tokenization</title> <link rel="stylesheet" href="demo.css"> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="../build/dagre-d3.js"></script> <h1>Dagre D3 Demo: Sentence Tokenization</h1> <style id="css"> /* This sets the color for "TK" nodes to a light blue green. */ g.type-TK > rect { fill: #00ffd0; } text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; } .node rect { stroke: #999; fill: #fff; stroke-width: 1.5px; } .edgePath path { stroke: #333; stroke-width: 1.5px; } </style> <svg id="svg-canvas" width=960 height=600></svg> <section> An example of visualizing the tokenization of a sentence. This example shows how CSS classes can be applied to a rendered graph. </section> <script id="js"> // Create the input graph var g = new dagreD3.graphlib.Graph() .setGraph({}) .setDefaultEdgeLabel(function() { return {}; }); // Here we"re setting nodeclass, which is used by our custom drawNodes function // below. g.setNode(0, { label: "TOP", class: "type-TOP" }); g.setNode(1, { label: "S", class: "type-S" }); g.setNode(2, { label: "NP", class: "type-NP" }); g.setNode(3, { label: "DT", class: "type-DT" }); g.setNode(4, { label: "This", class: "type-TK" }); g.setNode(5, { label: "VP", class: "type-VP" }); g.setNode(6, { label: "VBZ", class: "type-VBZ" }); g.setNode(7, { label: "is", class: "type-TK" }); g.setNode(8, { label: "NP", class: "type-NP" }); g.setNode(9, { label: "DT", class: "type-DT" }); g.setNode(10, { label: "an", class: "type-TK" }); g.setNode(11, { label: "NN", class: "type-NN" }); g.setNode(12, { label: "example", class: "type-TK" }); g.setNode(13, { label: ".", class: "type-." }); g.setNode(14, { label: "sentence", class: "type-TK" }); g.nodes().forEach(function(v) { var node = g.node(v); // Round the corners of the nodes node.rx = node.ry = 5; }); // Set up edges, no special attributes. g.setEdge(3, 4); g.setEdge(2, 3); g.setEdge(1, 2); g.setEdge(6, 7); g.setEdge(5, 6); g.setEdge(9, 10); g.setEdge(8, 9); g.setEdge(11,12); g.setEdge(8, 11); g.setEdge(5, 8); g.setEdge(1, 5); g.setEdge(13,14); g.setEdge(1, 13); g.setEdge(0, 1) // Create the renderer var render = new dagreD3.render(); // Set up an SVG group so that we can translate the final graph. var svg = d3.select("svg"), svgGroup = svg.append("g"); // Run the renderer. This is what draws the final graph. render(d3.select("svg g"), g); // Center the graph var xCenterOffset = (svg.attr("width") - g.graph().width) / 2; svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)"); svg.attr("height", g.graph().height + 40); </script> <script src="demo.js"></script> </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>