{"id":31846919,"url":"https://github.com/vasturiano/3d-force-graph-ar","last_synced_at":"2025-10-12T09:17:48.539Z","repository":{"id":36283000,"uuid":"222847507","full_name":"vasturiano/3d-force-graph-ar","owner":"vasturiano","description":"3D force-directed graph component in AR","archived":false,"fork":false,"pushed_at":"2025-07-03T00:34:55.000Z","size":3126,"stargazers_count":109,"open_issues_count":8,"forks_count":21,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-10-10T12:57:25.823Z","etag":null,"topics":["3d","aframe","arjs","augmented-reality","data-visualization","graph-theory","graphviz","webgl"],"latest_commit_sha":null,"homepage":"https://vasturiano.github.io/3d-force-graph-ar/example/async-load/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasturiano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-11-20T04:01:31.000Z","updated_at":"2025-09-24T13:55:49.000Z","dependencies_parsed_at":"2025-02-11T21:23:10.201Z","dependency_job_id":"c1a908f2-2e18-4186-bcf9-61b3726c8fc9","html_url":"https://github.com/vasturiano/3d-force-graph-ar","commit_stats":{"total_commits":102,"total_committers":1,"mean_commits":102.0,"dds":0.0,"last_synced_commit":"9d3896b1a9e06f9017d5907e9cc9e52e2928ebee"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/vasturiano/3d-force-graph-ar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2F3d-force-graph-ar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2F3d-force-graph-ar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2F3d-force-graph-ar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2F3d-force-graph-ar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/3d-force-graph-ar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2F3d-force-graph-ar/sbom","scorecard":{"id":916799,"data":{"date":"2025-08-11","repo":{"name":"github.com/vasturiano/3d-force-graph-ar","commit":"37ee24d31acdf1270deabf8801431dd5936e9801"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":4,"reason":"5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T21:19:38.031Z","repository_id":36283000,"created_at":"2025-08-24T21:19:38.031Z","updated_at":"2025-08-24T21:19:38.031Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010956,"owners_count":26084837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","aframe","arjs","augmented-reality","data-visualization","graph-theory","graphviz","webgl"],"created_at":"2025-10-12T09:17:45.693Z","updated_at":"2025-10-12T09:17:48.533Z","avatar_url":"https://github.com/vasturiano.png","language":"HTML","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url"],"categories":[],"sub_categories":[],"readme":"3D Force-Directed Graph in AR\n========\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vasturiano.github.io/3d-force-graph-ar/example/async-load/\"\u003e\u003cimg width=\"80%\" src=\"https://vasturiano.github.io/3d-force-graph-ar/example/async-load/preview.jpg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA web component to represent a graph data structure in augmented reality using a force-directed iterative layout.\nUses [AR.js](https://github.com/AR-js-org/AR.js) with [A-Frame](https://aframe.io/) for rendering and [d3-force-3d](https://github.com/vasturiano/d3-force-3d) for the layout physics engine.\n\nSee also the [VR version](https://github.com/vasturiano/3d-force-graph-vr), [WebGL 3D version](https://github.com/vasturiano/3d-force-graph), and the [A-Frame component version (aframe-forcegraph-component)](https://github.com/vasturiano/aframe-forcegraph-component).\n\nAnd check out the [React bindings](https://github.com/vasturiano/react-force-graph).\n\nTo load any of the examples below:\n* Open this [hiro marker image](https://ar-js-org.github.io/AR.js/data/images/HIRO.jpg) in your desktop browser.\n* Open the example on your phone browser, and point it at your desktop screen.\n\nCheck out the examples:\n* [Basic](https://vasturiano.github.io/3d-force-graph-ar/example/basic/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/basic/index.html))\n* [Asynchronous load](https://vasturiano.github.io/3d-force-graph-ar/example/async-load/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/async-load/index.html))\n* [Larger graph (~4k elements)](https://vasturiano.github.io/3d-force-graph-ar/example/large-graph/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/large-graph/index.html))\n* [Directional arrows](https://vasturiano.github.io/3d-force-graph-ar/example/directional-links-arrows/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/directional-links-arrows/index.html))\n* [Directional moving particles](https://vasturiano.github.io/3d-force-graph-ar/example/directional-links-particles/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/directional-links-particles/index.html))\n* [Curved lines and self links](https://vasturiano.github.io/3d-force-graph-ar/example/curved-links/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/curved-links/index.html))\n* [Auto-colored nodes/links](https://vasturiano.github.io/3d-force-graph-ar/example/auto-colored/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/auto-colored/index.html))\n* [Text as nodes](https://vasturiano.github.io/3d-force-graph-ar/example/text-nodes/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/text-nodes/index.html))\n* [Images as nodes](https://vasturiano.github.io/3d-force-graph-ar/example/img-nodes/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/img-nodes/index.html))\n* [Custom node geometries](https://vasturiano.github.io/3d-force-graph-ar/example/custom-node-geometry/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/custom-node-geometry/index.html))\n* [Text in links](https://vasturiano.github.io/3d-force-graph-ar/example/text-links/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/text-links/index.html))\n* [Dynamic data changes](https://vasturiano.github.io/3d-force-graph-ar/example/updating/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/updating/index.html))\n* [Node collision detection](https://vasturiano.github.io/3d-force-graph-ar/example/collision-detection/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/collision-detection/index.html))\n* [Emit link particles on demand](https://vasturiano.github.io/3d-force-graph-ar/example/emit-particles/) ([source](https://github.com/vasturiano/3d-force-graph-ar/blob/master/example/emit-particles/index.html))\n\n## ❤️ Support This Project\n\nIf you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url). Your contributions help keep open-source sustainable!\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)\n\n## Quick start\n\n```js\nimport ForceGraphAR from '3d-force-graph-ar';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/3d-force-graph-ar\"\u003e\u003c/script\u003e\n```\nthen\n```js\nconst myGraph = new ForceGraphAR(\u003cmyDOMElement\u003e)\n    .graphData(\u003cmyData\u003e);\n```\n\nMake sure to load these two script tags in your application, required for `AR.js` + `A-frame` to function properly:\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/aframe\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.jsdelivr.net/npm/@ar-js-org/ar.js\"\u003e\u003c/script\u003e\n```\n\n## API reference\n\n### Initialisation\n```js\nnew ForceGraphAR(\u003cdomElement\u003e, { configOptions })\n```\n\n| Config options | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003emarkerAttrs\u003c/b\u003e: \u003ci\u003eobject\u003c/i\u003e | Set of attributes that define the marker where the force directed graph is mounted, according to the [a-marker specification](https://ar-js-org.github.io/AR.js-Docs/marker-based/). | `{ preset: 'hiro' }` |\n\n### Data input\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003egraphData\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e]) | Getter/setter for graph data structure (see below for syntax details). | `{ nodes: [], links: [] }` |\n| \u003cb\u003ejsonUrl\u003c/b\u003e([\u003ci\u003eurl\u003c/i\u003e]) | URL of JSON file to load graph data directly from, as an alternative to specifying \u003ci\u003egraphData\u003c/i\u003e directly. | |\n| \u003cb\u003enodeId\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e]) | Node object accessor attribute for unique node id (used in link objects source/target). | `id` |\n| \u003cb\u003elinkSource\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e]) | Link object accessor attribute referring to id of source node. | `source` |\n| \u003cb\u003elinkTarget\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e]) | Link object accessor attribute referring to id of target node. | `target` |\n\n### Container layout\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003eyOffset\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the offset distance above the marker where to place the center coordinates `\u003c0,0,0\u003e` of the force directed graph. Measured in terms of marker width units. | 1.5 |\n| \u003cb\u003eglScale\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the translation scale between real world distances and WebGL units, determining the overall size of the graph. Defined in terms of how many GL units fit in a full marker width. | 200 |\n| \u003cb\u003ewidth\u003c/b\u003e([\u003ci\u003epx\u003c/i\u003e]) | Getter/setter for the viewport canvas width. | *\u0026lt;window width\u0026gt;* |\n| \u003cb\u003eheight\u003c/b\u003e([\u003ci\u003epx\u003c/i\u003e]) | Getter/setter for the viewport canvas height. | *\u0026lt;window height\u0026gt;* |\n\n### Node styling\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003enodeRelSize\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit. | 4 |\n| \u003cb\u003enodeVal\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). | `val` |\n| \u003cb\u003enodeVisibility\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` |\n| \u003cb\u003enodeColor\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function or attribute for node color (affects sphere color). | `color` |\n| \u003cb\u003enodeAutoColorBy\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | |\n| \u003cb\u003enodeOpacity\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the nodes sphere opacity, between [0,1]. | 0.75 |\n| \u003cb\u003enodeResolution\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the geometric resolution of each node, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres. | 8 |\n| \u003cb\u003enodeThreeObject\u003c/b\u003e([\u003ci\u003eObject3d\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function or attribute for generating a custom 3d object to render as graph nodes. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a \u003ci\u003efalsy\u003c/i\u003e value is returned, the default 3d object type will be used instead for that node.  | *default node object is a sphere, sized according to `val` and styled according to `color`.* |\n| \u003cb\u003enodeThreeObjectExtend\u003c/b\u003e([\u003ci\u003ebool\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Node object accessor function, attribute or a boolean value for whether to replace the default node when using a custom `nodeThreeObject` (`false`) or to extend it (`true`).  | `false` |\n\n### Link styling\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003elinkVisibility\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a boolean constant for whether to display the link line. A value of `false` maintains the link force without rendering it. | `true` |\n| \u003cb\u003elinkColor\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for line color. | `color` |\n| \u003cb\u003elinkAutoColorBy\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | |\n| \u003cb\u003elinkOpacity\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for line opacity of links, between [0,1]. | 0.2 |\n| \u003cb\u003elinkWidth\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the link line width. A value of zero will render a [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) whose width is constant (`1px`) regardless of distance. Values are rounded to the nearest decimal for indexing purposes. | 0 |\n| \u003cb\u003elinkResolution\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the geometric resolution of each link, expressed in how many radial segments to divide the cylinder. Higher values yield smoother cylinders. Applicable only to links with positive width. | 6 |\n| \u003cb\u003elinkCurvature\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the curvature radius of the link line. Curved lines are represented as 3D bezier curves, and any numeric value is accepted. A value of `0` renders a straight line. `1` indicates a radius equal to half of the line length, causing the curve to approximate a semi-circle. For self-referencing links (`source` equal to `target`) the curve is represented as a loop around the node, with length proportional to the curvature value. Lines are curved clockwise for positive values, and counter-clockwise for negative values. Note that rendering curved lines is purely a visual effect and does not affect the behavior of the underlying forces. | 0 |\n| \u003cb\u003elinkCurveRotation\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the rotation along the line axis to apply to the curve. Has no effect on straight lines. At `0` rotation, the curve is oriented in the direction of the intersection with the `XY` plane. The rotation angle (in radians) will rotate the curved line clockwise around the \"start-to-end\" axis from this reference orientation. | 0 |\n| \u003cb\u003elinkMaterial\u003c/b\u003e([\u003ci\u003eMaterial\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for specifying a custom material to style the graph links with. Should return an instance of [ThreeJS Material](https://threejs.org/docs/#api/materials/Material). If a \u003ci\u003efalsy\u003c/i\u003e value is returned, the default material will be used instead for that link. | *default link material is [MeshLambertMaterial](https://threejs.org/docs/#api/materials/MeshLambertMaterial) styled according to `color` and `opacity`.* |\n| \u003cb\u003elinkThreeObject\u003c/b\u003e([\u003ci\u003eObject3d\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for generating a custom 3d object to render as graph links. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a \u003ci\u003efalsy\u003c/i\u003e value is returned, the default 3d object type will be used instead for that link.  | *default link object is a line or cylinder, sized according to `width` and styled according to `material`.* |\n| \u003cb\u003elinkThreeObjectExtend\u003c/b\u003e([\u003ci\u003ebool\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a boolean value for whether to replace the default link when using a custom `linkThreeObject` (`false`) or to extend it (`true`).  | `false` |\n| \u003cb\u003elinkPositionUpdate\u003c/b\u003e([\u003ci\u003efn(linkObject, { start, end }, link)\u003c/i\u003e]) | Getter/setter for the custom function to call for updating the position of links at every render iteration. It receives the respective link `ThreeJS Object3d`, the `start` and `end` coordinates of the link (`{x,y,z}` each), and the link's `data`. If the function returns a truthy value, the regular position update function will not run for that link. | |\n| \u003cb\u003elinkDirectionalArrowLength\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the length of the arrow head indicating the link directionality. The arrow is displayed directly over the link line, and points in the direction of `source` \u003e `target`. A value of `0` hides the arrow. | 0 |\n| \u003cb\u003elinkDirectionalArrowColor\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for the color of the arrow head. | `color` |\n| \u003cb\u003elinkDirectionalArrowRelPos\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the longitudinal position of the arrow head along the link line, expressed as a ratio between `0` and `1`, where `0` indicates immediately next to the `source` node, `1` next to the `target` node, and `0.5` right in the middle. | 0.5 |\n| \u003cb\u003elinkDirectionalArrowResolution\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the geometric resolution of the arrow head, expressed in how many slice segments to divide the cone base circumference. Higher values yield smoother arrows. | 8 |\n| \u003cb\u003elinkDirectionalParticles\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the number of particles (small spheres) to display over the link line. The particles are distributed equi-spaced along the line, travel in the direction `source` \u003e `target`, and can be used to indicate link directionality. | 0 |\n| \u003cb\u003elinkDirectionalParticleSpeed\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the directional particles speed, expressed as the ratio of the link length to travel per frame. Values above `0.5` are discouraged. | 0.01 |\n| \u003cb\u003elinkDirectionalParticleOffset\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the offset of the directional particles initial position, expressed as a value between 0 and 1, relative to a full position cycle. | 0 |\n| \u003cb\u003elinkDirectionalParticleWidth\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function, attribute or a numeric constant for the directional particles width. Values are rounded to the nearest decimal for indexing purposes. | 0.5 |\n| \u003cb\u003elinkDirectionalParticleColor\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for the directional particles color. | `color` |\n| \u003cb\u003elinkDirectionalParticleResolution\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the geometric resolution of each directional particle, expressed in how many slice segments to divide the circumference. Higher values yield smoother particles. | 4 |\n| \u003cb\u003elinkDirectionalParticleThreeObject\u003c/b\u003e([\u003ci\u003eObject3d\u003c/i\u003e, \u003ci\u003estr\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Link object accessor function or attribute for a custom 3d object to use in the directional particles. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). Activating this will ignore the set values for the particle's width, color and resolution. | |\n| \u003cb\u003eemitParticle\u003c/b\u003e(\u003ci\u003elink\u003c/i\u003e) | An alternative mechanism for generating particles, this method emits a non-cyclical single particle within a specific link. The emitted particle shares the styling (speed, shape, color) of the regular particle props. A valid `link` object that is included in `graphData` should be passed as a single parameter. ||\n\n### Interaction\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003eonNodeHover\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for node hover events. The node object (or `null` if there's no node directly under the pointer line of sight) is included as the first argument, and the previous node object (or `null`) as second argument. | - |\n| \u003cb\u003eonLinkHover\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for link hover events. The link object (or `null` if there's no link directly under the pointer line of sight) is included as the first argument, and the previous link object (or `null`) as second argument. | - |\n| \u003cb\u003eonNodeClick\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for node click events. The node object is included as sole argument. | - |\n| \u003cb\u003eonLinkClick\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for link click events. The link object is included as sole argument. | - |\n\n### Force engine configuration\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003eforceEngine\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e]) | Getter/setter for which force-simulation engine to use ([*d3*](https://github.com/vasturiano/d3-force-3d) or [*ngraph*](https://github.com/anvaka/ngraph.forcelayout)). | `d3` |\n| \u003cb\u003enumDimensions\u003c/b\u003e([\u003ci\u003eint\u003c/i\u003e]) | Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3). | 3 |\n| \u003cb\u003edagMode\u003c/b\u003e([\u003ci\u003estr\u003c/i\u003e]) | Apply layout constraints based on the graph directionality. Only works correctly for [DAG](https://en.wikipedia.org/wiki/Directed_acyclic_graph) graph structures (without cycles). Choice between `td` (top-down), `bu` (bottom-up), `lr` (left-to-right), `rl` (right-to-left), `zout` (near-to-far), `zin` (far-to-near), `radialout` (outwards-radially) or `radialin` (inwards-radially). | |\n| \u003cb\u003edagLevelDistance\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | If `dagMode` is engaged, this specifies the distance between the different graph depths. | *auto-derived from the number of nodes* |\n| \u003cb\u003edagNodeFilter\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Node accessor function to specify nodes to ignore during the DAG layout processing. This accessor method receives a node object and should return a `boolean` value indicating whether the node is to be included. Excluded nodes will be left unconstrained and free to move in any direction. | `node =\u003e true` |\n| \u003cb\u003eonDagError\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback to invoke if a cycle is encountered while processing the data structure for a DAG layout. The loop segment of the graph is included for information, as an array of node ids. By default an exception will be thrown whenever a loop is encountered. You can override this method to handle this case externally and allow the graph to continue the DAG processing. Strict graph directionality is not guaranteed if a loop is encountered and the result is a best effort to establish a hierarchy. | *throws exception* |\n| \u003cb\u003ed3AlphaMin\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the [simulation alpha min](https://github.com/vasturiano/d3-force-3d#simulation_alphaMin) parameter, only applicable if using the d3 simulation engine. | `0` |\n| \u003cb\u003ed3AlphaDecay\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the [simulation intensity decay](https://github.com/vasturiano/d3-force-3d#simulation_alphaDecay) parameter, only applicable if using the d3 simulation engine. | `0.0228` |\n| \u003cb\u003ed3VelocityDecay\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for the nodes' [velocity decay](https://github.com/vasturiano/d3-force-3d#simulation_velocityDecay) that simulates the medium resistance, only applicable if using the d3 simulation engine. | `0.4` |\n| \u003cb\u003ed3Force\u003c/b\u003e(\u003ci\u003estr\u003c/i\u003e, [\u003ci\u003efn\u003c/i\u003e]) | Getter/setter for the internal forces that control the d3 simulation engine. Follows the same interface as `d3-force-3d`'s [simulation.force](https://github.com/vasturiano/d3-force-3d#simulation_force). Three forces are included by default: `'link'` (based on [forceLink](https://github.com/vasturiano/d3-force-3d#forceLink)), `'charge'` (based on [forceManyBody](https://github.com/vasturiano/d3-force-3d#forceManyBody)) and `'center'` (based on [forceCenter](https://github.com/vasturiano/d3-force-3d#forceCenter)). Each of these forces can be reconfigured, or new forces can be added to the system. This method is only applicable if using the d3 simulation engine. | |\n| \u003cb\u003ed3ReheatSimulation\u003c/b\u003e() | Reheats the force simulation engine, by setting the `alpha` value to `1`. Only applicable if using the d3 simulation engine. | |\n| \u003cb\u003engraphPhysics\u003c/b\u003e([\u003ci\u003eobject\u003c/i\u003e]) | Specify custom physics configuration for ngraph, according to its [configuration object](https://github.com/anvaka/ngraph.forcelayout#configuring-physics) syntax. This method is only applicable if using the ngraph simulation engine. | *ngraph default* |\n| \u003cb\u003ewarmupTicks\u003c/b\u003e([\u003ci\u003eint\u003c/i\u003e]) | Getter/setter for number of layout engine cycles to dry-run at ignition before starting to render. | 0 |\n| \u003cb\u003ecooldownTicks\u003c/b\u003e([\u003ci\u003eint\u003c/i\u003e]) | Getter/setter for how many build-in frames to render before stopping and freezing the layout engine. | Infinity |\n| \u003cb\u003ecooldownTime\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e]) | Getter/setter for how long (ms) to render for before stopping and freezing the layout engine. | 15000 |\n| \u003cb\u003eonEngineTick\u003c/b\u003e(\u003ci\u003efn\u003c/i\u003e) | Callback function invoked at every tick of the simulation engine. | - |\n| \u003cb\u003eonEngineStop\u003c/b\u003e(\u003ci\u003efn\u003c/i\u003e) | Callback function invoked when the simulation engine stops and the layout is frozen. | - |\n| \u003cb\u003erefresh\u003c/b\u003e() | Redraws all the nodes/links. |\n\n### Utility\n\n| Method | Description |\n| --- | --- |\n| \u003cb\u003egetGraphBbox\u003c/b\u003e([\u003ci\u003enodeFilterFn\u003c/i\u003e]) | Returns the current bounding box of the nodes in the graph, formatted as `{ x: [\u003cnum\u003e, \u003cnum\u003e], y: [\u003cnum\u003e, \u003cnum\u003e], z: [\u003cnum\u003e, \u003cnum\u003e] }`. If no nodes are found, returns `null`. Accepts an optional argument to define a custom node filter: `node =\u003e \u003cboolean\u003e`, which should return a truthy value if the node is to be included. This can be useful to calculate the bounding box of a portion of the graph. |\n\n### Input JSON syntax\n```json\n{\n    \"nodes\": [ \n        { \n          \"id\": \"id1\",\n          \"name\": \"name1\",\n          \"val\": 1 \n        },\n        { \n          \"id\": \"id2\",\n          \"name\": \"name2\",\n          \"val\": 10 \n        },\n        ...\n    ],\n    \"links\": [\n        {\n            \"source\": \"id1\",\n            \"target\": \"id2\"\n        },\n        ...\n    ]\n}\n```\n\n\n[npm-img]: https://img.shields.io/npm/v/3d-force-graph-ar\n[npm-url]: https://npmjs.org/package/3d-force-graph-ar\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/3d-force-graph-ar\n[build-size-url]: https://bundlephobia.com/result?p=3d-force-graph-ar\n[npm-downloads-img]: https://img.shields.io/npm/dt/3d-force-graph-ar\n[npm-downloads-url]: https://www.npmtrends.com/3d-force-graph-ar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2F3d-force-graph-ar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2F3d-force-graph-ar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2F3d-force-graph-ar/lists"}