This example use HTML5 Canvas to draw a simple graph.
The Node can be dragged to new positions on the canvas.
root = document | |
.querySelector('h3[personal_toolbar_folder="true"]') | |
.parentElement | |
process_dt(root) | |
/** | |
* Process dl: |
/////////////////////////////////////////////////////////////////////////////// | |
// example from https://www.dndbeyond.com/sources/xgte/character-names | |
// let id = 'f0edbf90-4ecc-4a4e-9f3f-17f0b154e25f'; | |
const getRandomTable = function(id) { | |
// src: https://stackoverflow.com/questions/3895478/ | |
const range = (size, startAt = 0) => [...Array(size).keys()].map(i => i + startAt); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.button-group { | |
font-family: Sans-Serif; |
/////////////////////////////////////////////////////////////////////////////// | |
// get snapshot data -- this might fail, maybe you need to inspect 1st | |
$bar = $('#deck1').find('.bar-wrap').first(); | |
snapshot = angular.element($bar).scope().snapshot | |
/////////////////////////////////////////////////////////////////////////////// | |
// inject D3 |
var canvas; | |
var ctx; | |
function init() { | |
canvas = document.getElementById("canvas"); | |
ctx = canvas.getContext("2d"); | |
draw(); | |
} | |
This example use HTML5 Canvas to draw a simple graph.
The Node can be dragged to new positions on the canvas.
var graph = { | |
vertices: [ | |
{ // Castle Black | |
"x": 240, | |
"y": 90, | |
edges: [1,3] | |
}, | |
{ // Karhold | |
"x": 320, | |
"y": 140, |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Graph Layout</title> | |
<style> | |
article, aside, figure, footer, header, hgroup, | |
menu, nav, section { display: block; } | |
</style> | |
</head> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
<meta charset=utf-8 /> | |
<title>Click a Node</title> | |
<!--[if IE]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<style> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>graph-vis</title> | |
</head> | |
<body> | |
<canvas id="viewer" width="800" height="500"></canvas> | |
<script src="graph-vis.js"></script> | |
</body> |