Cannot read property 'category20' of undefined

[aderbas]

I do not know if it's a problem of d3. I'm using Angular2 (angular-cli), installed types of d3, everything is right with project and depencencies. Try to make a simple chart using sample code.

import { Component }  from '@angular/core';
import * as d3                from 'd3';
import { nvD3 }               from 'ng2-nvd3'

@Component({ ...})
export class MyComponent {
    constructor(){
       this.fakeChart();
    }

  fakeChart(){
    this.chartOptions = {
      chart: {
        type: 'lineChart',
        height: 450,
        margin : {
          top: 20,
          right: 20,
          bottom: 40,
          left: 55
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        useInteractiveGuideline: true,
        xAxis: {
          axisLabel: 'Time (ms)'
        },
        yAxis: {
          axisLabel: 'Voltage (v)',
          tickFormat: function(d){
            return d3.format('.02f')(d);
          },
          axisLabelDistance: -10
        }
      }
    };

    let sin = [];

    for (var i = 0; i < 100; i++) {
      sin.push({x: i, y: Math.sin(i/10)});
    }

    this.dataChart = [
      {
        values: sin,
        key: 'Sine Wave',
        color: '#2ca02c'
      }
    ];
  }
}

HTML template:

<div>
   <nvd3 [options]="chartOptions" [data]="dataChart"></nvd3>
</div>

When I try to run:

main.bundle.js:43641 EXCEPTION: Error in ./ReplayViewComponent class ReplayViewComponent - inline template:54:35 caused by: Cannot read property 'category20' of undefinedErrorHandler.handleError @ main.bundle.js:43641
main.bundle.js:43643 ORIGINAL EXCEPTION: Cannot read property 'category20' of undefinedErrorHandler.handleError @ main.bundle.js:43643
main.bundle.js:43646 ORIGINAL STACKTRACE:ErrorHandler.handleError @ main.bundle.js:43646
main.bundle.js:43647 TypeError: Cannot read property 'category20' of undefined
    at Object.a.utils.defaultColor (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:3:11895)
    at Object.a.models.scatter (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:9:10122)
    at Object.a.models.line (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:6:8335)
    at Object.a.models.lineChart (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:6:14834)
    at nvD3.updateWithOptions (http://localhost:4200/main.bundle.js:74106:51)
    at nvD3.ngOnChanges (http://localhost:4200/main.bundle.js:74099:14)
    at DebugAppView._View_ReplayViewComponent0.detectChangesInternal (ReplayViewComponent.ngfactory.js:440:45)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:63626:14)
    at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:63731:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:63652:19)

[aderbas]

I'm using D3 v4.2.7 and ng2-nvd3 v1.1.3.

[liquidpele]

D3 version 4 is not yet supported

[garretwilson]

For future reference, an answer on Stack Overflow indicates that maybe the source code could use `scaleOrdinal(d3.schemeCategory20). That's just a guess on my part. I'm sure if d3 v4 isn't supported that there are other incompatible parts of the code as well

It's a shame d3 v4 isn't supported.

[liquidpele]

If anyone wants to take a go at making it supported, please send me a PR!

[garretwilson]

I'm new to D3.js and the whole shebang, so I can't even guess about how much effort that will take. But I note that D3 v3.5.17 is almost a year old; the latest is v4.5.0.

Is there any existing effort to bring support for D3 v4.x?

[lygstate]

+1

[colwilson]

+1

[liquidpele]

A few people have shown interest in getting it to work with d3 v4, but I haven't gotten any pull requests around it yet.

[alzuma]

+1

[ChaitanyaTecho]

Temp Hack to Work!
Do not add modules at component and module level.
add below code to your index.html and don't import anything

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>

[ketansp]

Changed d3 version to 3.5.17 in my package.json file and it worked. Thanks @liquidpele for your comment.