flow like the river
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/cat.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 35 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/dog.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 40 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/eagle.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 30 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/elephant.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/grasshopper.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 68 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/octopus.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 42 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/owl.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 57 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/panda.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/squirrel.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 86 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/tiger.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 44 KiB |
BIN
BACK_BACK/node_modules/force-graph/example/img-nodes/imgs/whale.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 179 KiB |
43
BACK_BACK/node_modules/force-graph/example/img-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,43 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg']
|
||||
.map(src => {
|
||||
const img = new Image();
|
||||
img.src = `./imgs/${src}`;
|
||||
return img;
|
||||
});
|
||||
|
||||
// Random connected graph
|
||||
const gData = {
|
||||
nodes: imgs.map((img, id) => ({ id, img })),
|
||||
links: [...Array(imgs.length).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.nodeCanvasObject(({ img, x, y }, ctx) => {
|
||||
const size = 12;
|
||||
ctx.drawImage(img, x - size / 2, y - size / 2, size, size);
|
||||
})
|
||||
.nodePointerAreaPaint((node, color, ctx) => {
|
||||
const size = 12;
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(node.x - size / 2, node.y - size / 2, size, size); // draw square as pointer trap
|
||||
})
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||