Last active
July 13, 2023 00:42
-
-
Save joegaffey/c43e66b04d11f82342fa1ffd7d6688f9 to your computer and use it in GitHub Desktop.
D3.js sequence diagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta name="robots" content="noindex"> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Sequence Diagram</title> | |
| </head> | |
| <body> | |
| <div id="drawArea"></div> | |
| <script id="jsbin-javascript"> | |
| (function() { | |
| var classes = ["Class A", "Class B", "Class C", "Class D", "Class E", "Class F", "Class G"]; | |
| var messages = [{start: 0, end: 2, message: "From A to C"}, | |
| {start: 2, end: 3, message: "From C to D"}, | |
| {start: 3, end: 4, message: "From D to E"}, | |
| {start: 4, end: 3, message: "From E to D"}, | |
| {start: 3, end: 6, message: "From D to G"}, | |
| {start: 6, end: 3, message: "From G to D"}, | |
| {start: 3, end: 2, message: "From D to C"}, | |
| {start: 2, end: 0, message: "From C to A"}]; | |
| var XPAD = 50; | |
| var YPAD = 20; | |
| var VERT_SPACE = 100; | |
| var VERT_PAD = 60; | |
| var CLASS_WIDTH = 80; | |
| var CLASS_HEIGHT = 40; | |
| var CLASS_LABEL_X_OFFSET = -25; | |
| var CLASS_LABEL_Y_OFFSET = 25; | |
| var MESSAGE_SPACE = 50; | |
| var MESSAGE_LABEL_X_OFFSET = -40; | |
| var MESSAGE_LABEL_Y_OFFSET = 70; | |
| var MESSAGE_ARROW_Y_OFFSET = 80; | |
| var CANVAS_WIDTH = 800; | |
| var CANVAS_HEIGHT = 600; | |
| // Create an svg canvas | |
| var svg = d3.select("#drawArea") | |
| .append("svg") | |
| .attr("width", CANVAS_WIDTH) | |
| .attr("height", CANVAS_HEIGHT); | |
| // Draw vertical lines | |
| classes.forEach(function(c, i) { | |
| var line = svg.append("line") | |
| .style("stroke", "#888") | |
| .attr("x1", XPAD + i * VERT_SPACE) | |
| .attr("y1", YPAD) | |
| .attr("x2", XPAD + i * VERT_SPACE) | |
| .attr("y2", YPAD + VERT_PAD + messages.length * MESSAGE_SPACE); | |
| }); | |
| // Draw classes | |
| classes.forEach(function(c, i) { | |
| var x = XPAD + i * VERT_SPACE; | |
| var g1 = svg.append("g") | |
| .attr("transform", "translate(" + x + "," + YPAD + ")") | |
| .attr("class", "first") | |
| .append("rect") | |
| .attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: CLASS_HEIGHT}) | |
| .style("fill", "#CCC"); | |
| }); | |
| // Draw class labels | |
| classes.forEach(function(c, i) { | |
| var x = XPAD + i * VERT_SPACE; | |
| var g1 = svg.append("g") | |
| .attr("transform", "translate(" + x + "," + YPAD + ")") | |
| .attr("class", "first") | |
| .append("text") | |
| .text(function (d) { return c; }) | |
| .attr("dx", CLASS_LABEL_X_OFFSET) | |
| .attr("dy", CLASS_LABEL_Y_OFFSET); | |
| }); | |
| // Draw message arrows | |
| messages.forEach(function(m, i) { | |
| var y = YPAD + MESSAGE_ARROW_Y_OFFSET + i * MESSAGE_SPACE; | |
| var line = svg.append("line") | |
| .style("stroke", "black") | |
| .attr("x1", XPAD + m.start * VERT_SPACE) | |
| .attr("y1", y) | |
| .attr("x2", XPAD + m.end * VERT_SPACE) | |
| .attr("y2", y) | |
| .attr("marker-end", "url(#end)") | |
| .append("text") | |
| .text(function (d) { return m.message; }); | |
| }); | |
| // Draw message labels | |
| messages.forEach(function(m, i) { | |
| var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((m.end - m.start) * VERT_SPACE) / 2) + (m.start * VERT_SPACE); | |
| var yPos = YPAD + MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE; | |
| var g1 = svg.append("g") | |
| .attr("transform", "translate(" + xPos + "," + yPos + ")") | |
| .attr("class", "first") | |
| .append("text") | |
| .text(function (d) { return m.message; }); | |
| }); | |
| // Arrow style | |
| svg.append("svg:defs").selectAll("marker") | |
| .data(["end"]) | |
| .enter().append("svg:marker") | |
| .attr("id", String) | |
| .attr("viewBox", "0 -5 10 10") | |
| .attr("refX", 10) | |
| .attr("refY", 0) | |
| .attr("markerWidth", 10) | |
| .attr("markerHeight", 10) | |
| .attr("orient", "auto") | |
| .append("svg:path") | |
| .attr("d", "M0,-5L10,0L0,5"); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
I am able to zoom and drag, thanks..
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how we can make this whole diagram as Zoomable and draggable? I am able to make draggable classes, message line only not whole.