Use susielu/d3-annotation into Angular 10 Application

Question

I'm trying to import and use susielu/d3-annotation into an angular project.

    "@types/d3": "^5.7.2",
    "d3": "5.15.0",
    "d3-svg-annotation": "^2.5.1",

That is part of my package.json

Inside a component, I'm able to use d3 with the following import:

import * as d3 from 'd3';

Trying to load the annotation library like this:

import * as d3Annotation from 'd3-svg-annotation'

simply does not extend the d3 library and thus I have no access to d3.annotation() method.

Looking around I found no solution, but I'm sure it is something trivial.

score 0 · Answer 1 · answered Aug 13 '20 at 00:00

With the above import and the following code:

const makeAnnotations: any = d3Annotation.annotation()
  .type(d3Annotation.annotationLabel)
  .annotations(annotations)
    
d3.select("#c_boh")
  .append("g")
  .attr("class", "annotation-group")
  .call(makeAnnotations)

It works, the key is to define the annotation ad any, and then the .call does work

Use susielu/d3-annotation into Angular 10 Application

1 Answers1