30:[] 2e:{"title":"3D v3","cells":[{"id":0,"value":"md`# 3D v3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof buttons = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"{\n const buttons = d3.select(viewof buttons);\n \n buttons.select('input[name=add]').on('click', addNode)\n buttons.select('input[name=remove]').on('click', removeNode)\n \n function removeNode() {\n let { nodes, links } = Graph.graphData();\n if (nodes.length == 1) return;\n \n const node = nodes[nodes.length - 1]; // Remove this one\n\n links = links.filter(l => l.source !== node && l.target !== node); // Remove links attached to node\n nodes.splice(node.id, 1); // Remove node\n nodes.forEach((n, idx) => { n.id = idx; }); // Reset node ids to array index\n Graph.graphData({ nodes, links });\n }\n \n function addNode() {\n const { nodes, links } = Graph.graphData();\n const id = nodes.length;\n\n Graph.graphData({\n nodes: [...nodes, { id }],\n links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]\n }); \n }\n \n return Graph.graphData().nodes\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"Graph = {\n const n = 3;\n const data = {\n nodes: [...Array(n).keys()].map(i => ({ id: i })),\n links: [...Array(n).keys()]\n .filter(id => id)\n .map(id => ({\n source: id,\n target: Math.round(Math.random() * (id-1))\n }))\n };\n \n \n const Graph = ForceGraph3D()(container)\n .graphData(data)\n .width(width)\n .height(300)\n .nodeRelSize(10)\n .nodeLabel(d => 'This is node #' + d.id)\n .linkDirectionalParticles(2)\n .linkWidth(2)\n .linkDirectionalParticleWidth(5)\n .nodeOpacity(1)\n .onNodeHover(node => container.style.cursor = node ? 'pointer' : null)\n .onNodeClick(node => {\n\n });\n \n // This determines the distance between nodes\n const linkForce = Graph\n .d3Force('link')\n .distance(link => 100);\n \n return Graph\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## References\n\n* [3d-force-graph](https://github.com/vasturiano/3d-force-graph) -- github\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"ForceGraph3D= require(\"3d-force-graph\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}