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://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://unpkg.com/d3-arrow@0.0.7/dist/d3-arrow.min.js"></script>
<script>

const myArrow = d3.arrow5();

</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 myArrow = d3.arrow5()
    .id("my-arrow")
    .attr("fill", "steelblue")

svg.call(myArrow);

svg.append("polyline")
    .attr("marker-end", "url(#my-arrow)")
    .attr("points", [[5, 10], [55, 10]])
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)

# 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.