mermaid

<!DOCTYPE html> <html> <head> <title>user-defined.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/user-defined.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="#user-defined.html">user-defined.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="user-defined.html"> <h1> <a href="#user-defined.html" name="user-defined.html" class="pilcrow">¶</a>user-defined.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: User-defined Shapes and Arrows</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> <style id="css"> body { font: 300 14px 'Helvetica Neue', Helvetica; } .node rect, .node circle, .node ellipse, .node polygon { stroke: #333; fill: #fff; stroke-width: 1.5px; } .edgePath path.path { stroke: #333; fill: none; stroke-width: 1.5px; } </style> <h1>Dagre D3 Demo: User-defined Shapes and Arrows</h1> <svg width=960 height=600><g/></svg> <section> An example that shows how to create and use user-defined shapes and arrows. </section> <script id="js"> // Create a new directed graph var g = new dagreD3.graphlib.Graph().setGraph({}); g.setNode("house", { shape: "house", label: "house" }); g.setNode("rect", { shape: "rect" }); g.setEdge("house", "rect", { arrowhead: "hollowPoint" }); var svg = d3.select("svg"), inner = svg.select("g"); // Set up zoom support var zoom = d3.behavior.zoom().on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")"); }); svg.call(zoom); // Create the renderer var render = new dagreD3.render(); // Add our custom shape (a house) render.shapes().house = function(parent, bbox, node) { var w = bbox.width, h = bbox.height, points = [ { x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: -h }, { x: w/2, y: -h * 3/2 }, { x: 0, y: -h } ]; shapeSvg = parent.insert("polygon", ":first-child") .attr("points", points.map(function(d) { return d.x + "," + d.y; }).join(" ")) .attr("transform", "translate(" + (-w/2) + "," + (h * 3/4) + ")"); node.intersect = function(point) { return dagreD3.intersect.polygon(node, points, point); }; return shapeSvg; }; // Add our custom arrow (a hollow-point) render.arrows().hollowPoint = function normal(parent, id, edge, type) { var marker = parent.append("marker") .attr("id", id) .attr("viewBox", "0 0 10 10") .attr("refX", 9) .attr("refY", 5) .attr("markerUnits", "strokeWidth") .attr("markerWidth", 8) .attr("markerHeight", 6) .attr("orient", "auto"); var path = marker.append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .style("stroke-width", 1) .style("stroke-dasharray", "1,0") .style("fill", "#fff") .style("stroke", "#333"); dagreD3.util.applyStyle(path, edge[type + "Style"]); }; // Run the renderer. This is what draws the final graph. render(inner, g); // Center the graph var initialScale = 0.75; zoom .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20]) .scale(initialScale) .event(svg); svg.attr('height', g.graph().height * initialScale + 40); </script> <script src="demo.js"></script> </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>