d3-arrows

Helper functions to generate curved and straight labels for d3 svg graphics

Usage no npm install needed!

<script type="module">
  import d3Arrows from 'https://cdn.skypack.dev/d3-arrows';
</script>

README

npm

d3-arrows

Helper functions for making curved labels for d3 svg graphics

Installing

If you use NPM, npm install d3-arrows

Usage

d3-arrows exports a function called addLabel. This takes a single argument which is an object with all your label options. el should be a d3 selector for the element you want to add the label to. Currently only one type of arrow is supported, the arc.

The radius, largeArcFlag and sweepFlag properties are optional.

addLabel({"el":svg,
            "id":"denison",
            "targetX":projection([151.2,-33.9])[0],
            "targetY":projection([151.2,-33.9])[1],
            "sourceX":projection([154.21,-36.09])[0],
            "sourceY":projection([154.21,-36.09])[1],
            "text":"Fort Denison"
            });