{"id":20119233,"url":"https://github.com/harrystevens/d3-arrow","last_synced_at":"2025-07-20T02:32:28.866Z","repository":{"id":42718647,"uuid":"280430203","full_name":"HarryStevens/d3-arrow","owner":"HarryStevens","description":"Attach arrowheads to SVG elements.","archived":false,"fork":false,"pushed_at":"2023-01-06T13:45:25.000Z","size":717,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T14:08:20.615Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/d3-arrow","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarryStevens.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}},"created_at":"2020-07-17T13:23:02.000Z","updated_at":"2024-10-13T20:57:36.000Z","dependencies_parsed_at":"2023-02-06T04:30:36.059Z","dependency_job_id":null,"html_url":"https://github.com/HarryStevens/d3-arrow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-arrow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-arrow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-arrow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-arrow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarryStevens","download_url":"https://codeload.github.com/HarryStevens/d3-arrow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252703453,"owners_count":21790887,"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","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":[],"created_at":"2024-11-13T19:14:51.447Z","updated_at":"2025-05-06T14:32:16.023Z","avatar_url":"https://github.com/HarryStevens.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-arrow\nAttach arrowheads to SVG elements. This module is in alpha, so use with caution.\n\n## Installing\n\nIf you use NPM, `npm install d3-arrow`. Otherwise, download the [latest release](https://github.com/HarryStevens/d3-arrow/raw/master/dist/d3-arrow.zip). AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-arrow@0.0.25/dist/d3-arrow.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\nconst arrow = d3.arrow1();\n\n\u003c/script\u003e\n```\n\n## API Reference\n\nThe API is based on the list of arrows in Adobe Illustrator v24.1.2. To add an arrowhead to an SVG element, you must first add the arrowhead generator to your SVG using [\u003ci\u003eselection\u003c/i\u003e.call](https://github.com/d3/d3-selection#selection_call). Then, pass the generator's [\u003ci\u003eid\u003c/i\u003e](#arrow_id) to the element's \"marker-end\" attribute:\n\n```js\nconst svg = d3.select(\"body\").append(\"svg\")\n    .attr(\"width\", 60)\n    .attr(\"height\", 20);\n\nconst arrow = d3.arrow1()\n    .id(\"my-arrow\")\n    .attr(\"fill\", \"steelblue\")\n    .attr(\"stroke\", \"steelblue\");\n\nsvg.call(arrow);\n\nsvg.append(\"polyline\")\n    .attr(\"marker-end\", \"url(#my-arrow)\")\n    .attr(\"points\", [[5, 10], [55, 10]])\n    .attr(\"stroke\", \"steelblue\")\n    .attr(\"stroke-width\", 2);\n```\n\n\u003ca name=\"arrow1\" href=\"#arrow1\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow1\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-1.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-1\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow2\" href=\"#arrow2\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow2\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-2.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-2\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow3\" href=\"#arrow3\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow3\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-3.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-3\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow5\" href=\"#arrow5\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow5\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-5.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-5\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow10\" href=\"#arrow10\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow10\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-10.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-10\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow11\" href=\"#arrow11\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow11\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-11.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-11\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"arrow13\" href=\"#arrow13\"\u003e#\u003c/a\u003e d3.\u003cb\u003earrow13\u003c/b\u003e() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-13.js \"Source\"), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nCreates a new arrow generator with an [\u003ci\u003eid\u003c/i\u003e](#arrow_id) of \"d3-arrow-13\" and a [\u003ci\u003escale\u003c/i\u003e](#arrow_scale) of 1.\n\n\u003ca name=\"_arrow\" href=\"#_arrow\"\u003e#\u003c/a\u003e \u003ci\u003earrow\u003c/i\u003e(\u003ci\u003econtext\u003c/i\u003e) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nAdd the arrow generator to the given \u003ci\u003econtext\u003c/i\u003e, which should be a selection of SVG elements.\n\n\u003ca name=\"arrow_id\" href=\"#arrow_id\"\u003e#\u003c/a\u003e \u003ci\u003earrow\u003c/i\u003e.id([\u003ci\u003eid\u003c/i\u003e]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nSets or gets the arrow's unique \u003ci\u003eid\u003c/i\u003e string, which you'll reference when setting the element's \"marker-end\" attribute.\n\n\u003ca name=\"arrow_scale\" href=\"#arrow_scale\"\u003e#\u003c/a\u003e \u003ci\u003earrow\u003c/i\u003e.scale([\u003ci\u003escale\u003c/i\u003e]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nSets or gets the arrow's \u003ci\u003escale\u003c/i\u003e number.\n\n\u003ca name=\"arrow_attr\" href=\"#arrow_attr\"\u003e#\u003c/a\u003e \u003ci\u003earrow\u003c/i\u003e.attr(\u003ci\u003ekey\u003c/i\u003e[, \u003ci\u003evalue\u003c/i\u003e]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/utils/iterate.js), [Example](https://observablehq.com/d/7759e56ba89ced03 \"Example\")\n\nSets or gets an appearance attribute's value.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fd3-arrow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharrystevens%2Fd3-arrow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fd3-arrow/lists"}