Since we live in a future that involves cool modern JavaScript and build systems like webpack and Parcel, you might sometimes have a little trouble installing or using JavaScript or D3 libraries. Let's take a look at two, and how we adapt them for our code (specifically with sawhorse).
d3-tip has been around since the earth was formed.
To use d3-tip, we first install it. It's easy.
npm install d3-tip
If we were working in normal D3 land, we could then just use d3.tip automatically. But we aren't, so we can't!! Instead, we'll import d3-tip and attach it onto D3 manually.
import d3Tip from 'd3-tip'
d3.tip = d3TipThen we can follow normal d3-tip code (even if it's really old D3 v3 code!).
d3-annotation has very confusing documentation until you have a basic knowledge of how the plugin works. I'd recommend this page instead.
To install d3-annotation you'll need to pay special attention to the package name.
npm install d3-svg-annotation
We can't just attach our annotation library to d3 like we did with d3-tip. d3-tip had one part - d3.tip - butthe annotation library has a million pieces:
d3.annotationLabeld3.annotationd3.annotationCalloutCircle- and a hundred more!
I'm too lazy to attach each one of them individually, so we're going to have to rewrite all of the annotation library code samples.
First, we import like we did with d3-tip. Then we change the code every time it talks about annotations, replacing d3. with d3Annotation..
// import it as d3Annotation
import d3Annotation from 'd3-svg-annotation'
// NO
// const type = d3.annotationCalloutCircle
// YES
const type = d3Annotation.annotationCalloutCircle
// NO
// const makeAnnotations = d3.annotation()
// .annotations(annotations)
// YES
const makeAnnotations = d3Annotation.annotation()
.annotations(annotations)It's a pain, but it works.