Chriss Mejía
Chriss Mejía

Reputation: 110

Typescript d3 - Property 'pie' does not exist on type 'typeof d3'

I have a problem trying to create a D3 Pie Chart, I'm using d3 v4, if I use:

/// < reference path="../typings/index.d.ts" />
import * as d3 from "d3"; 
d3.layout.pie< IData.IPie>().value(function (d) {

Grunt compile fine but it fail in the browser saying:

Cannot read property 'pie' of undefined

That's because d3 v4 uses this instead:

d3.pie< IData.IPie>().value(function (d) {

But if I change it and try to run grunt over, I get:

[ts] Property 'pie' does not exist on type 'typeof d3'.

Any hint about it?

node_modules/d3: "_id": "[email protected]"

typings: https://raw.githubusercontent.com/types/npm-d3/a3171387d85d30049479ca880c617e63dca23afe/index.d.ts

Edit:

package.json

{
  "name": "OpenCharts",
  "description": "It's time to easier beautiful charts",
  "version": "0.0.2",
  "devDependencies": {
    "@types/d3": "^4.5.0",
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-ts": "^6.0.0-beta.3",
    "grunt-tslint": "^4.0.0"
  },
  "author": "Chriss Mejía",
  "license": "MIT",
  "dependencies": {
    "d3": "^4.4.0"
  }
}

And remove the typings reference path make no difference.

Upvotes: 2

Views: 8823

Answers (3)

Sajid Mulani
Sajid Mulani

Reputation: 1

use new Chartist.PieChart('#MyChart', this.chartData, this.chartOptions);

instead of .pie

Upvotes: -2

Chriss Mej&#237;a
Chriss Mej&#237;a

Reputation: 110

Basically there was a conflict with typings, when I totally remove the library it just start working:

typings uninstall d3
npm uninstall typings

Upvotes: -1

Tiep Phan
Tiep Phan

Reputation: 12596

it's seem you're using type for version 3, and your d3 version is 4.

remove your installed type def, then install this

npm install @types/d3 --save-dev

Github repo: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/d3

Upvotes: 2

Related Questions