d3-shap Cannot find name 'CanvasPathMethods'

[Leannechn]

hello! I
Cannot find name 'CanvasPathMethods' in d3-shap may I missing some files? // ----------------------------------------------------------------------------------- // SYMBOLS // ----------------------------------------------------------------------------------- export interface SymbolType { draw(context: CanvasPathMethods, size: number): void; // line num: 289 } where is the CanvasPathMethods defined? why not code as // ----------------------------------------------------------------------------------- // SYMBOLS // ----------------------------------------------------------------------------------- export interface SymbolType { draw(context: CanvasRenderingContext2D, size: number): void; }

[tomwanzek]

CanvasPathMethods is a subset of CanvasRenderingContext2D. It is used in conformance to the d3-shape API. See Custom Symbol Types - symbolType.draw(...). There can be use cases where drawing a (custom) symbol type is done in a custom rendering context, such context does not have to implement all methods of CanvasRenderingContext2D.

CanvasPathMethods is definied in the the library lib.dom.d.ts of the typescript distribution. So your typescript compiler options in tsconfig.json may have to explicitly list dom under the library settings, e.g.: "lib": ["es6", "dom"]

For reference, the mentioned library definitions file, contains the following:

interface CanvasPathMethods {
    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
    closePath(): void;
    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
    lineTo(x: number, y: number): void;
    moveTo(x: number, y: number): void;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    rect(x: number, y: number, w: number, h: number): void;
}

[jeremychone]

This one is coming back with TypeScript 3.1 ?

Actually, scratch that. Weird, I need a npm remove @types/d3 and then npm install @types/d3, and the this error disappeared?

[vnugent]

I'm seeing similar error when upgrading to Typescript 3.1.1. Removing/reinstalling d3-* libs doesn't help.

node_modules/@types/d3/node_modules/@types/d3-shape/index.d.ts
(2273,19): Cannot find name 'CanvasPathMethods'.

[jeremychone]

@vnugent It was weird in my case, I think I removed the node_modules and need a fresh install, perhaps a couple of time, and it went away.

[peterhudec]

Same for me after upgrading to TypeScript 3.1. Reinstalling @types/d3-shape didn't help, but removing it, then removing ./node_modules, then reinstalling @types/d3-shape worked:

$ npm remove -S @types/d3-shape
$ rm -rf node_modules/
$ npm install -S @types/d3-shape

[grogi]

Same for me after upgrading to TypeScript 3.1. Reinstalling @types/d3-shape didn't help, but removing it, then removing ./node_modules, then reinstalling @types/d3-shape worked:

$ npm remove -S @types/d3-shape
$ rm -rf node_modules/
$ npm install -S @types/d3-shape

I hate fixes like that - when it simply 'starts working'. Because it seems you didn't get to the bottom of the issue and it might pop-up again in least convenient moment.

Is there a difference of version of @types/d3-shape you used before and after?

[alangpierce]

In my case it was @types/d3 in my package.json and I use yarn, and I did yarn remove @types/d3 and then yarn add --dev @types/d3 to fix.

At least with yarn, my understanding is that uninstalling and reinstalling a package will update all of its dependencies to the latest matching version, whereas just installing a package at a new version will keep its dependencies the same as long as they still match the dependency version range. d3-shape depends on d3-path, which went from 1.0.6 to 1.0.7 in my uninstall-and-reinstall, so my guess is that's what actually fixed the issue.