https://github.com/harrystevens/d3-arrow
Attach arrowheads to SVG elements.
https://github.com/harrystevens/d3-arrow
Last synced: 18 days ago
JSON representation
Attach arrowheads to SVG elements.
- Host: GitHub
- URL: https://github.com/harrystevens/d3-arrow
- Owner: HarryStevens
- License: bsd-3-clause
- Created: 2020-07-17T13:23:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T13:45:25.000Z (over 2 years ago)
- Last Synced: 2025-04-09T14:08:20.615Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/d3-arrow
- Size: 700 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-arrow
Attach arrowheads to SVG elements. This module is in alpha, so use with caution.
## Installing
If 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:
```html
const arrow = d3.arrow1();
```
## API Reference
The 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 [selection.call](https://github.com/d3/d3-selection#selection_call). Then, pass the generator's [id](#arrow_id) to the element's "marker-end" attribute:
```js
const svg = d3.select("body").append("svg")
.attr("width", 60)
.attr("height", 20);
const arrow = d3.arrow1()
.id("my-arrow")
.attr("fill", "steelblue")
.attr("stroke", "steelblue");
svg.call(arrow);
svg.append("polyline")
.attr("marker-end", "url(#my-arrow)")
.attr("points", [[5, 10], [55, 10]])
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
```
# d3.arrow1() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-1.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-1" and a [scale](#arrow_scale) of 1.
# d3.arrow2() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-2.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-2" and a [scale](#arrow_scale) of 1.
# d3.arrow3() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-3.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-3" and a [scale](#arrow_scale) of 1.
# d3.arrow5() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-5.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-5" and a [scale](#arrow_scale) of 1.
# d3.arrow10() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-10.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-10" and a [scale](#arrow_scale) of 1.
# d3.arrow11() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-11.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-11" and a [scale](#arrow_scale) of 1.
# d3.arrow13() · [Source](https://github.com/harrystevens/d3-arrow/blob/master/src/arrow-13.js "Source"), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Creates a new arrow generator with an [id](#arrow_id) of "d3-arrow-13" and a [scale](#arrow_scale) of 1.
# arrow(context) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Add the arrow generator to the given context, which should be a selection of SVG elements.
# arrow.id([id]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Sets or gets the arrow's unique id string, which you'll reference when setting the element's "marker-end" attribute.
# arrow.scale([scale]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/index.js), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Sets or gets the arrow's scale number.
# arrow.attr(key[, value]) · [Source](https://github.com/d3/d3-arrow/blob/master/src/utils/iterate.js), [Example](https://observablehq.com/d/7759e56ba89ced03 "Example")
Sets or gets an appearance attribute's value.