d3 v5

[braco]

Are there any plans on upgrading this package to d3 5.x? The current d3 version is 5.9, your docs say 4.x is the target.

[susielu]

I just tried some examples and didn't see any issues with it being used with v5, are you running into a specific issue? I can update the docs to say that it also works with v5 otherwise.

[braco]

No, I can't get this library to monkey patch d3 as it seems is intended, none of the methods show up. Thought that was maybe a d3 mismatch.

I'm trying various combinations of

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

but something about the bundling process isn't working. Why was that method chosen out of curiosity, is that idiomatic to d3?

[gcherem]

I have the same problem. Unable to use this lib with Angular. Any update on it?

[oluckyman]

    "d3": "^5.15.0",
    "d3-svg-annotation": "^2.3.1",

works for me with these versions ¯\(ツ)/¯

[Ponchia]

I'm not able to extend d3 into using the annotation library. Having the types for d3 just throw error on d3.annotation() does not exists, while removing the type obviously throw the same error in runtime

After having installed the npm packages, I can use d3 with this import * as d3 from 'd3';, but I'm not able to extend it into using d3-svg-annotation

Haw have you done it? Sorry for the silly question

Edit: Got it working, it was indeed a silly question.

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

Using as:

let makeAnnotation: any = d3Annotation.annotation().annotations(labels).type(d3Annotation.annotationCalloutCircle).accessors({
      x: function x(d: any) {
        return _x(moment.utc(d.date, "YYYY-MM-DDTHH:mm:ss.SSSZ").toDate());
      },
      y: function y(d: any) {
        return _y(d.close);
      }
    }).accessorsInverse({
      date: function date(d) {
        return timeFormat(_x.invert(d.x));
      },
      close: function close(d) {
        return _y.invert(d.y);
      }
      // @ts-ignore
    }).on('subjectover', function (annotation) {
      ...
    }).on('subjectout', function (annotation) {
      ...
    });

Do note the use of any and @ts-ignore to get rid of type errors.