Last active
February 7, 2020 11:28
-
-
Save cosmiclattes/6b36c7fabb4d578d88860b67592e08d3 to your computer and use it in GitHub Desktop.
ED Diagram - Demo
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
| /* | |
| function connected_edges(d){ | |
| var edges = svgGroup.selectAll(".edge"); | |
| var list_selected = {} | |
| return list_selected; | |
| } | |
| */ | |
| function connected_nodes(d){ | |
| var edges = svgGroup.selectAll(".edge"); | |
| var selected = {} | |
| edges._groups[0].forEach(function(e){ | |
| var source_id = e.id.split('-')[0] | |
| var destination_id = e.id.split('-')[1] | |
| if (source_id == d.id){ | |
| selected[destination_id] = ''; | |
| } | |
| if (destination_id == d.id){ | |
| selected[source_id] = ''; | |
| } | |
| }); | |
| return selected; | |
| } | |
| // Create the input graph | |
| var g = new dagreD3.graphlib.Graph() | |
| .setGraph({'align': 'UL', 'rankdir': 'RL', 'ranker': 'longest-path'}) | |
| .setDefaultEdgeLabel(function() { return {}; }); | |
| // Here we're setting nodeclass, which is used by our custom drawNodes function | |
| // below. | |
| for(index in nodes_list){ | |
| g.setNode( | |
| nodes_list[index].id, | |
| {label: nodes_list[index].name, class: "node", id: nodes_list[index].id} | |
| ); | |
| } | |
| 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. | |
| for(index in edges_list){ | |
| //temporarily switching it to check it out, revert it back. | |
| g.setEdge( | |
| edges_list[index].source, | |
| edges_list[index].destination, | |
| { | |
| curve: d3.curveBasis , | |
| id:String(edges_list[index].source)+"-"+String(edges_list[index].destination), | |
| class: "edge" | |
| } | |
| ); | |
| } | |
| // 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); | |
| nodes = svgGroup.selectAll(".node") | |
| edges = svgGroup.selectAll(".edge") | |
| nodes.on("click", function(d) { | |
| d3.event.stopPropagation(); | |
| nodes._groups[0].forEach(function(n){ | |
| n.classList.add("visible"); | |
| n.classList.remove("invisible"); | |
| }); | |
| edges._groups[0].forEach(function(e){ | |
| e.classList.add("visible"); | |
| e.classList.remove("invisible"); | |
| }); | |
| clicked_elem = this; | |
| clicked_elem.classList.add("selected"); | |
| selected_nodes = connected_nodes(clicked_elem); | |
| nodes._groups[0].forEach(function(n){ | |
| if(!(n.id in selected_nodes || n.id == clicked_elem.id)){ | |
| n.classList.add("invisible"); | |
| n.classList.remove("visible"); | |
| } | |
| }); | |
| edges._groups[0].forEach(function(e){ | |
| if(!((e.id.split('-')[0] == clicked_elem.id) || (e.id.split('-')[1] == clicked_elem.id))){ | |
| e.classList.add("invisible"); | |
| e.classList.remove("visible"); | |
| } | |
| }); | |
| }); | |
| svg.on("click", function(){ | |
| nodes._groups[0].forEach(function(n){ | |
| n.classList.add("visible"); | |
| n.classList.remove("invisible"); | |
| n.classList.remove("selected"); | |
| }); | |
| edges._groups[0].forEach(function(e){ | |
| e.classList.add("visible"); | |
| e.classList.remove("invisible"); | |
| }); | |
| }); |
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
| var nodes_list = [ | |
| {'name':'Player', id: 0}, | |
| {'name':'Team', id: 1}, | |
| {'name':'Game', id: 2}, | |
| {'name':'Drive', id: 3}, | |
| {'name':'Play', id: 4}, | |
| {'name':'Play Player', id: 5}, | |
| {'name':'Meta', id: 6}, | |
| ]; | |
| var edges_list = [ | |
| {'source': 0, 'destination': 1}, | |
| {'source': 2, 'destination': 1}, | |
| {'source': 4, 'destination': 1}, | |
| {'source': 2, 'destination': 3}, | |
| {'source': 2, 'destination': 5}, | |
| {'source': 3, 'destination': 3}, | |
| {'source': 4, 'destination': 5}, | |
| {'source': 3, 'destination': 1}, | |
| {'source': 5, 'destination': 1}, | |
| {'source': 2, 'destination': 4}, | |
| {'source': 3, 'destination': 4}, | |
| {'source': 3, 'destination': 5}, | |
| {'source': 0, 'destination': 5}, | |
| ]; |
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 charset="utf-8"> | |
| <title>Dagre D3 Demo: Sentence Tokenization</title> | |
| <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.4/dagre-d3.min.js"></script> | |
| <h1>Dagre D3 Demo: ER Diagram</h1> | |
| <style id="css"> | |
| .node.selected{ | |
| fill: #00ffd0; | |
| } | |
| text { | |
| font-weight: 300; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 10px; | |
| } | |
| .node rect { | |
| stroke: #999; | |
| fill: #fff; | |
| stroke-width: 1px; | |
| } | |
| .node rect{ | |
| cursor: pointer; | |
| } | |
| .node rect text{ | |
| cursor: pointer; | |
| } | |
| .edgePath path { | |
| stroke: #333; | |
| stroke-width: 1px; | |
| } | |
| .visible{ | |
| opacity: 1 !important; | |
| } | |
| .invisible{ | |
| opacity: 0 !important; | |
| } | |
| </style> | |
| <svg id="svg-canvas" width=800 height=800></svg> | |
| <section> | |
| <p>An example of visualizing an ER Diagram</section> | |
| <script src="data.js"></script> | |
| <script src="code.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment