Won't run in Ionic2 / typescript 2

[markterrill]

Hi,

Had a number of problems including this library (via npm install [git url]). Ionic 3, angular 4, typescript 2, d3 v4.10, @types/d3-selection@^1.1.0

The string errors

Argument of type '{ r: (d: { r: any; }) => any; cx: (d: { cx: any; }) => any; cy: (d: { cy: any; }) => any; fill: a...' is not assignable to parameter of type 'string'.

are resolved by changing the calls to attr() into separate functions, ie:

attr(
            "x1", function (d: { x1 }) {
              return d.x1;
            })
          .attr(
            "y1",function (d: { y1 }) {
              return d.y1;
            })
          .attr(
            "x2",function (d: { x2 }) {
              return d.x2;
            })
          .attr(
            "y2",function (d: { y2 }) {
              return d.y2;
            })
          .style("stroke-width",this.options.scale.width)
          .style("stroke",this.options.scale.color);

the error with const y = (<d3.DragEvent> d3.event).y - (that.options.size / 2); thats fixed by changing it to const y = d3.event.y - (that.options.size / 2);

After that it complains about an animation with easebounce, so set animations to false in the options then it was bringing up another error. Are you able to run up a basic ionic project folder and see if you can get it to work?

[markterrill]

My package.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "watch": "ionic-app-scripts watch",
    "test": "gulp validate"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/ble": "^4.1.0",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/facebook": "^4.1.0",
    "@ionic-native/google-analytics": "^4.1.0",
    "@ionic-native/spinner-dialog": "^4.1.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic-native/toast": "^4.1.0",
    "@ionic/storage": "^2.0.1",
    "@nsalaun/ng-logger": "^2.0.1",
    "ajv": "^5.2.2",
    "angular2-knob": "git+https://github.com/xzegga/angular2-knob.git",
    "angularfire2": "^4.0.0-rc.0",
    "d3": "^4.10.0",
    "firebase": "^4.0.0",
    "ionic-angular": "3.6.0",
    "ionicons": "~3.0.0",
    "jquery": "^3.2.1",
    "jquery-knob": "^1.2.11",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "ng2-knob": "^1.0.4",
    "rxjs": "5.4.0",
    "setimmediate": "^1.0.5",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-ionic-angular": "1.4.0",
    "@types/d3": "4.10.0",
    "@types/d3-selection": "^1.1.0",
    "gulp": "^3.9.1",
    "ionic": "3.9.2",
    "typescript": "2.3.4"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "ionicTemplate2: An Ionic project",
  "config": {
    "ionic_source_map": "source-map"
  },
  "pre-push#master": [
    "test"
  ]
}

[xzegga]

The first problem is related with .attr() method in d3.js v4 witch doesn't accept javascript object as a params any more, I am changing to .attrs() method from d3-selection-multi. I will pushed in a few mintues.

[xzegga]

@markterrill just I have pushed the fixes for this issues. thanks for your help!!