d3-arrow

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. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://unpkg.com/d3-arrow@0.0.24/dist/d3-arrow.min.js"></script>
<script>

const arrow = d3.arrow1();

</script>

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. Then, pass the generator's id to the element's "marker-end" attribute:

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, Example

Creates a new arrow generator with an id of "d3-arrow-1" and a scale of 1.

# d3.arrow2() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-2" and a scale of 1.

# d3.arrow3() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-3" and a scale of 1.

# d3.arrow5() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-5" and a scale of 1.

# d3.arrow10() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-10" and a scale of 1.

# d3.arrow11() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-11" and a scale of 1.

# d3.arrow13() · Source, Example

Creates a new arrow generator with an id of "d3-arrow-13" and a scale of 1.

# arrow(context) · Source, Example

Add the arrow generator to the given context, which should be a selection of SVG elements.

# arrow.id([id]) · Source, 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, Example

Sets or gets the arrow's scale number.

# arrow.attr(key[, value]) · Source, Example

Sets or gets an appearance attribute's value.