| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!doctype html>
- <meta charset="utf-8">
- <title>Dagre D3 Demo: Style Attributes</title>
- <link rel="stylesheet" href="demo.css">
- <script src="../../node_modules/graphlibrary/dist/graphlib.js"></script>
- <script src="../../node_modules/d3/build/d3.js"></script>
- <script src="../dagre-d3.js"></script>
- <h1>Dagre D3 Demo: Style Attributes</h1>
- <style id="css">
- text {
- font-weight: 300;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
- font-size: 14px;
- }
- .node rect {
- stroke: #333;
- fill: #fff;
- stroke-width: 1.5px;
- }
- .edgePath path.path {
- stroke: #333;
- fill: none;
- stroke-width: 1.5px;
- }
- .arrowhead {
- stroke: blue;
- fill: blue;
- stroke-width: 1.5px;
- }
- </style>
- <svg id="svg" width=960 height=600></svg>
- <section>
- <p>An example showing how styles that are set in the input graph can be applied
- to nodes, node labels, edges, and edge labels in the rendered graph.
- </section>
- <script id="js">
- // Create the input graph
- var g = new graphlib.Graph().setGraph({});
- // Fill node "A" with the color green
- g.setNode("A", { style: "fill: #afa" });
- // Make the label for node "B" bold
- g.setNode("B", { labelStyle: "font-weight: bold" });
- // Double the size of the font for node "C"
- g.setNode("C", { labelStyle: "font-size: 2em" });
- g.setNode("D", {});
- g.setNode("E", {});
- // Make the edge from "A" to "B" red, thick, and dashed
- g.setEdge("A", "B", {
- style: "stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;",
- arrowheadStyle: "fill: #f66"
- });
- // Make the label for the edge from "C" to "B" italic and underlined
- g.setEdge("C", "B", {
- label: "A to C",
- labelStyle: "font-style: italic; text-decoration: underline;"
- });
- // Make the edge between A and D smoother.
- // see available options for lineInterpolate here: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
- g.setEdge("A", "D", {
- label: "line interpolation different",
- curve: d3.curveBasis
- });
- g.setEdge("E", "D", {});
- // Make the arrowhead blue
- g.setEdge("A", "E", {
- label: "Arrowhead class",
- arrowheadClass: 'arrowhead'
- });
- // 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"),
- inner = svg.append("g");
- // Run the renderer. This is what draws the final graph.
- render(inner, g);
- // Center the graph
- var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
- inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
- svg.attr("height", g.graph().height + 40);
- </script>
- <script src="demo.js"></script>
|
