D3 events not fired

Ionic Framework ionic-v3
1

Hi everyone!

Short description of the problem:

I am trying to use D3 from the exemple of this page. The SVG HTML is correctly interpreted but, click events generated by D3 are not fired.

I tried to add data-tap-disabled="true" to my <ion-content> as advised here but it didn’t work.

What behavior are you expecting?

I would like to use events in my D3 components.

Steps to reproduce:

  1. ionic start d3_test blank --ts --v2 -sass
  2. npm install
  3. npm install d3 --save
  4. Add the CSS of the example in the home.scss file.
  5. Import D3 in the home.ts file and past the JavaScript code of the example in the ngOnInit function.

Notes : Few adaptations of the JavaScript code of the example in order to have a TypeScript build success :

  • Add the missing declarator var before use of the path variable in the diagonal(s, d) function.
  • Change the d3.select parameter to .svg_container instead of body and add this class to the <ion-content> tag of the home.html file.

Which Ionic Version? 2.0.0-rc.2

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.2.0
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.9.1
Xcode version: Not installed

Any idea of what to do?

2

It starts working by adding a wrapper inside <ion-content> and appending the SVG to this one instead of its parent.