title: angular2-nvd3 error: groups.watchTransition is not a function
body: <p>I've an angular website with some charts made with angular2-nvd3. i recently upgrade all my dependencies and since then I have this errors:</p>
  
  <pre><code>ERROR TypeError: groups.watchTransition is not a function
      at SVGGElement.&lt;anonymous&gt; (nv.d3.js:13130)
      at d3.js:962
      at d3_selection_each (d3.js:968)
      at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.each (d3.js:961)
      at Array.chart (nv.d3.js:12775)
      at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (d3.js:975)
      at SVGGElement.&lt;anonymous&gt; (nv.d3.js:6621)
      at d3.js:962
      at d3_selection_each (d3.js:968)
      at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.each (d3.js:961)
  ERROR TypeError: bars.watchTransition is not a function
          at SVGGElement.&lt;anonymous&gt; (nv.d3.js:8286)
          at d3.js:962
          at d3_selection_each (d3.js:968)
          at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.each (d3.js:961)
          at Array.chart (nv.d3.js:8041)
          at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (d3.js:975)
          at SVGSVGElement.&lt;anonymous&gt; (nv.d3.js:8682)
          at d3.js:962
          at d3_selection_each (d3.js:968)
          at Array.push../node_modules/angular2-nvd3/node_modules/d3/d3.js.d3_selectionPrototype.each (d3.js:961)
  </code></pre>
  
  <p>I needed to make many changes due to breaking changes in the last rxjs, so I realy would like to find a solution without rolling back everything. Main changes are about angular and rxjs versions.
  Does someone have an idea? </p>
  
  <p>Here my previous package.json:</p>
  
  <pre><code> "@agm/core": "^1.0.0-beta.2",
      "@angular/animations": "^6.0.1",
      "@angular/cdk": "^6.0.1",
      "@angular/common": "^6.0.1",
      "@angular/compiler": "^6.0.1",
      "@angular/core": "^6.0.1",
      "@angular/flex-layout": "^6.0.0-beta.15",
      "@angular/forms": "^6.0.1",
      "@angular/http": "^6.0.1",
      "@angular/material": "^6.0.1",
      "@angular/platform-browser": "^6.0.1",
      "@angular/platform-browser-dynamic": "^6.0.1",
      "@angular/router": "^6.0.1",
      "@asymmetrik/ngx-leaflet": "^3.0.2",
      "@asymmetrik/ngx-leaflet-markercluster": "^1.0.0",
      "angular2-nvd3": "^1.0.7",
      "bcryptjs": "^2.4.3",
      "core-js": "^2.5.6",
      "d3": "^3.5.17",
      "flex-layout": "^1.0.1",
      "hammerjs": "^2.0.8",
      "leaflet": "^1.3.1",
      "leaflet.markercluster": "^1.3.0",
      "nvd3": "^1.8.6",
      "rxjs": "^6.1.0",
      "rxjs-compat": "^6.1.0",
      "zone.js": "^0.8.26"
  </code></pre>
  
  <p>And the new one:</p>
  
  <pre><code>   "@agm/core": "^1.0.0-beta.3",
      "@angular/animations": "^6.1.7",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.7",
      "@angular/core": "^6.1.7",
      "@angular/flex-layout": "^6.0.0-beta.18",
      "@angular/forms": "^6.1.7",
      "@angular/http": "^6.1.7",
      "@angular/material": "^6.4.7",
      "@angular/platform-browser": "^6.1.7",
      "@angular/platform-browser-dynamic": "^6.1.7",
      "@angular/router": "^6.1.7",
      "@asymmetrik/ngx-leaflet": "^3.1.0",
      "@asymmetrik/ngx-leaflet-markercluster": "^1.0.0",
      "@types/bcryptjs": "^2.4.1",
      "angular2-nvd3": "^1.0.7",
      "bcryptjs": "^2.4.3",
      "core-js": "^2.5.7",
      "crypto": "^1.0.1",
      "d3": "^3.5.17",
      "flex-layout": "^1.0.1",
      "hammerjs": "^2.0.8",
      "leaflet": "^1.3.4",
      "leaflet.markercluster": "^1.4.0",
      "nvd3": "^1.8.5",
      "rxjs": "^6.3.2",
      "zone.js": "^0.8.26"
  </code></pre>