Add graph-maker site
parent
dcf5cc3c45
commit
5a0cd8d1ca
|
|
@ -0,0 +1,33 @@
|
|||
svg {
|
||||
cursor: crosshair;
|
||||
display: block;
|
||||
margin: auto;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.edge {
|
||||
stroke: #888;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.edge:hover,
|
||||
.dragLine {
|
||||
stroke: #333;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.vertex {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertex:hover {
|
||||
stroke: #333;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dragLine.hidden {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
"use strict";
|
||||
//node ids are in order in which nodes come in existence
|
||||
|
||||
var univSvgHeight;
|
||||
var univSvgWidth;
|
||||
|
||||
const nodes = [{ id: 1 }, { id: 2 }, { id: 3 }];
|
||||
|
||||
const links = [
|
||||
{ source: 0, target: 1 },
|
||||
{ source: 0, target: 2 },
|
||||
{ source: 1, target: 2 }
|
||||
];
|
||||
|
||||
//universal width and height let index.htm control svg dimensions when needed
|
||||
let lastNodeId = nodes.length;
|
||||
var w = univSvgWidth ? univSvgWidth : 616,
|
||||
h = univSvgHeight ? univSvgHeight : 400,
|
||||
rad = 10,
|
||||
wid = 10;
|
||||
|
||||
const svg = d3
|
||||
.select("#svg-wrap")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
const dragLine = svg
|
||||
.append("path")
|
||||
.attr("class", "dragLine hidden")
|
||||
.attr("d", "M0,0L0,0");
|
||||
|
||||
let edges = svg.append("g").selectAll(".edge");
|
||||
|
||||
let vertices = svg.append("g").selectAll(".vertex");
|
||||
|
||||
const force = d3
|
||||
.forceSimulation()
|
||||
.force(
|
||||
"charge",
|
||||
d3
|
||||
.forceManyBody()
|
||||
.strength(-300)
|
||||
.distanceMax(w / 2)
|
||||
)
|
||||
.force("link", d3.forceLink().distance(60))
|
||||
.force("x", d3.forceX(w / 2))
|
||||
.force("y", d3.forceY(h / 2))
|
||||
.on("tick", tick);
|
||||
|
||||
force.nodes(nodes);
|
||||
force.force("link").links(links);
|
||||
|
||||
const fgColor = '#ffffff'
|
||||
const colors = d3.schemeCategory10;
|
||||
|
||||
let mousedownNode = null;
|
||||
|
||||
const clrBtn = d3.select("#clear-graph");
|
||||
clrBtn.on("click", clearGraph);
|
||||
|
||||
const nodename = (id) =>
|
||||
id <= 26 ?
|
||||
String.fromCharCode(id + 96) :
|
||||
String.fromCharCode(parseInt(id / 26) + 96) + String.fromCharCode((id % 26) + 96);
|
||||
|
||||
//empties the graph
|
||||
function clearGraph() {
|
||||
nodes.splice(0);
|
||||
links.splice(0);
|
||||
lastNodeId = 0;
|
||||
restart();
|
||||
showGraphLatex();
|
||||
}
|
||||
|
||||
//update the simulation
|
||||
function tick() {
|
||||
edges
|
||||
.attr("x1", (d) => d.source.x)
|
||||
.attr("y1", (d) => d.source.y)
|
||||
.attr("x2", (d) => d.target.x)
|
||||
.attr("y2", (d) => d.target.y);
|
||||
|
||||
vertices
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
}
|
||||
|
||||
function addNode() {
|
||||
const e = d3.event;
|
||||
if (e.button == 0) {
|
||||
var coords = d3.mouse(e.currentTarget);
|
||||
var newNode = { x: coords[0], y: coords[1], id: ++lastNodeId };
|
||||
nodes.push(newNode);
|
||||
restart();
|
||||
showGraphLatex();
|
||||
}
|
||||
}
|
||||
|
||||
function removeNode(d, i) {
|
||||
//to make ctrl-drag works for mac/osx users
|
||||
if (d3.event.ctrlKey) return;
|
||||
|
||||
nodes.splice(nodes.indexOf(d), 1);
|
||||
links
|
||||
.filter((l) => l.source === d || l.target === d)
|
||||
.foreach((l) => links.splice(links.indexOf(l), 1));
|
||||
|
||||
d3.event.preventDefault();
|
||||
restart();
|
||||
showGraphLatex();
|
||||
}
|
||||
|
||||
function removeEdge(d, i) {
|
||||
links.splice(links.indexOf(d), 1);
|
||||
d3.event.preventDefault();
|
||||
restart();
|
||||
showGraphLatex();
|
||||
}
|
||||
|
||||
function beginDragLine(d) {
|
||||
//to prevent call of addNode through svg
|
||||
d3.event.stopPropagation();
|
||||
//to prevent dragging of svg in firefox
|
||||
d3.event.preventDefault();
|
||||
if (d3.event.ctrlKey || d3.event.button != 0) return;
|
||||
|
||||
mousedownNode = d;
|
||||
dragLine
|
||||
.classed("hidden", false)
|
||||
.attr("d", `M${mousedownNode.x},${mousedownNode.y}L${mousedownNode.x},${mousedownNode.y}`);
|
||||
}
|
||||
|
||||
function updateDragLine() {
|
||||
var coords = d3.mouse(d3.event.currentTarget);
|
||||
if (!mousedownNode) return;
|
||||
dragLine.attr("d", `M${mousedownNode.x},${mousedownNode.y}L${coords[0]},${coords[1]}`);
|
||||
}
|
||||
|
||||
function hideDragLine() {
|
||||
dragLine.classed("hidden", true);
|
||||
mousedownNode = null;
|
||||
restart();
|
||||
}
|
||||
|
||||
//no need to call hideDragLine() and restart() in endDragLine
|
||||
//mouseup on vertices propagates to svg which calls hideDragLine
|
||||
function endDragLine(d) {
|
||||
if (!mousedownNode || mousedownNode === d) return;
|
||||
//return if link already exists
|
||||
if (links.some(l =>
|
||||
(l.source === mousedownNode && l.target === d) ||
|
||||
(l.source === d && l.target === mousedownNode)
|
||||
)) return;
|
||||
|
||||
const newLink = { source: mousedownNode, target: d };
|
||||
links.push(newLink);
|
||||
showGraphLatex();
|
||||
}
|
||||
|
||||
//one response per ctrl keydown
|
||||
var lastKeyDown = -1;
|
||||
|
||||
function keydown() {
|
||||
d3.event.preventDefault();
|
||||
if (lastKeyDown !== -1) return;
|
||||
lastKeyDown = d3.event.key;
|
||||
|
||||
if (lastKeyDown === "Control") {
|
||||
vertices.call(
|
||||
d3
|
||||
.drag()
|
||||
.on("start", (d) => {
|
||||
if (!d3.event.active) force.alphaTarget(1).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
})
|
||||
.on("drag", (d) => {
|
||||
d.fx = d3.event.x;
|
||||
d.fy = d3.event.y;
|
||||
})
|
||||
.on("end", (d) => {
|
||||
if (!d3.event.active) force.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function keyup() {
|
||||
lastKeyDown = -1;
|
||||
if (d3.event.key === "Control")
|
||||
vertices.on("mousedown.drag", null);
|
||||
}
|
||||
|
||||
//updates the graph by updating links, nodes and binding them with DOM
|
||||
//interface is defined through several events
|
||||
function restart() {
|
||||
edges = edges.data(links, (d) => "v" + d.source.id + "-v" + d.target.id);
|
||||
edges.exit().remove();
|
||||
|
||||
var ed = edges
|
||||
.enter()
|
||||
.append("line")
|
||||
.attr("class", "edge")
|
||||
// .style("stroke", (d, _) => '#888')
|
||||
.on("mousedown", () => d3.event.stopPropagation())
|
||||
.on("contextmenu", removeEdge);
|
||||
|
||||
ed.append("title").text(d => "v" + d.source.id + "-v" + d.target.id);
|
||||
|
||||
edges = ed.merge(edges);
|
||||
|
||||
//vertices are known by id
|
||||
vertices = vertices.data(nodes, (d) => d.id);
|
||||
vertices.exit().remove();
|
||||
|
||||
var ve = vertices
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("r", rad)
|
||||
.attr("class", "vertex")
|
||||
.style("fill", (d, _) => colors[d.id % 10])
|
||||
.on("mousedown", beginDragLine)
|
||||
.on("mouseup", endDragLine)
|
||||
.on("contextmenu", removeNode);
|
||||
|
||||
ve.append("title").text(d => "v" + d.id);
|
||||
|
||||
vertices = ve.merge(vertices);
|
||||
|
||||
|
||||
// edges.sort((a, b) => a.source !== b.source ? a.source > b.source : a.target > b.target)
|
||||
links.sort((a, b) => a.source !== b.source ? a.source > b.source : a.target > b.target)
|
||||
|
||||
force.nodes(nodes);
|
||||
force.force("link").links(links);
|
||||
force.alpha(0.8).restart();
|
||||
}
|
||||
|
||||
//further interface
|
||||
svg
|
||||
.on("mousedown", addNode)
|
||||
.on("mousemove", updateDragLine)
|
||||
.on("mouseup", hideDragLine)
|
||||
.on("contextmenu", () => d3.event.preventDefault())
|
||||
.on("mouseleave", hideDragLine);
|
||||
|
||||
d3.select(window)
|
||||
.on("keydown", keydown)
|
||||
.on("keyup", keyup);
|
||||
|
||||
restart();
|
||||
showGraphLatex();
|
||||
|
||||
//handling output area
|
||||
function showGraphLatex() {
|
||||
const v = "\\[ V = \\{ " +
|
||||
nodes
|
||||
.map(({ id }, i) => {
|
||||
return (i == 0) ?
|
||||
`${nodename(id)}` :
|
||||
`, ${nodename(id)}`;
|
||||
//add line break
|
||||
// if ((i + 1) % 15 == 0) v += "\\\\";
|
||||
})
|
||||
.join('') +
|
||||
" \\} \\]\n\n";
|
||||
|
||||
const e = "\\[ E = \\{" +
|
||||
links.map(({ source, target }, i) => {
|
||||
if (i == links.length - 1)
|
||||
return `${nodename(source.id)}${nodename(target.id)}`;
|
||||
else
|
||||
return `${nodename(source.id)}${nodename(target.id)}, `;
|
||||
// //add line break
|
||||
// if ((i + 1) % 10 == 0) e += "\\\\";
|
||||
}).join('') +
|
||||
"\\} \\]";
|
||||
|
||||
document.getElementById("output").textContent = v + e;
|
||||
//recall mathjax
|
||||
document.getElementById("latex-output").textContent = v + e;
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
}
|
||||
|
||||
function generateSVG() {
|
||||
const svgClone =
|
||||
document
|
||||
.getElementsByTagName("svg")[0]
|
||||
.cloneNode({ deep: true });
|
||||
|
||||
svgClone
|
||||
.firstChild
|
||||
.childNodes
|
||||
.foreach(e => e.style.stroke = "#000000");
|
||||
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svgClone);
|
||||
|
||||
if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
|
||||
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
}
|
||||
if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
|
||||
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
||||
}
|
||||
|
||||
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
||||
return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
|
||||
}
|
||||
|
||||
function downloadSVG() {
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = generateSVG();
|
||||
downloadLink.download = 'graph.svg';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
d3
|
||||
.select('#export-svg')
|
||||
.on('click', downloadSVG)
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Graph maker</title>
|
||||
|
||||
<!-- <script src="https://d3js.org/d3.v6.min.js" defer></script> -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" defer></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
<script src="./graph.js" defer></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="graph.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="app-area" class="d-flex-column justify-content-center">
|
||||
<div id="svg-wrap" class="bg-dark flex-column"></div>
|
||||
<div id="svg-buttons" class="text-center my-5 flex-column">
|
||||
<button class="btn btn-primary" id="clear-graph">Clear All</button>
|
||||
<button class="btn btn-primary" id="export-svg">Export SVG</button>
|
||||
<div class="flex-column">
|
||||
<input type="radio" class="btn-check" id="btn-check-outlined" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-secondary" for="btn-check-outlined">Undirected</label><br>
|
||||
|
||||
<input type="radio" class="btn-check" id="btn-check-outlined" autocomplete="off" disabled>
|
||||
<label class="btn btn-outline-secondary" for="btn-check-outlined">Directed</label><br>
|
||||
|
||||
<input type="radio" class="btn-check" id="btn-check-outlined" autocomplete="off" disabled>
|
||||
<label class="btn btn-outline-secondary" for="btn-check-outlined">Tree</label><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-5 mx-5">
|
||||
<textarea name="output" id="output" cols="30" rows="10" class="col-sm"></textarea>
|
||||
<div id="latex-output" class="col-sm"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue