export 'time' (imported as 'd3') was not found in 'd3'

user_8507876 0
Viewed 30287

I am new to use D3 with React. My react app is created by create-react-app. In my react component, I import d3 using import * as d3 from 'd3'

My code is as below:

    this.xScale = d3.time.scale()
        .domain(d3.extent(this.props.data, function (d) {
            return d[_self.props.xData];
         }))
    .rangeRound([0, this.w]);

    this.yScale = d3.scale.linear()
        .domain([0,d3.max(this.props.data,function(d){
            return d[_self.props.yData]+_self.props.yMaxBuffer;
        })])
        .range([this.h, 0]);

    this.area = d3.svg.area()
        .x(function (d) {
            return this.xScale(d[_self.props.xData]);
        })
        .y0(this.h)
        .y1(function (d) {
            return this.yScale(d[_self.props.yData]);
        }).interpolate(this.props.interpolations);

Got the compiling error:

export 'time' (imported as 'd3') was not found in 'd3'

I import d3 using npm install d3 --save under my project directory.

Anyone has ideas what's the problem?

d3.js reactjs
3 Answers

Use d3.timeScale() instead of d3.time.scale()

The D3.js syntax changed in version 4 so that d3.time is no longer used.

You either need to import d3.js version 3

npm install d3@3

or change your code to use d3.js version 4 syntax

d3.timeScale();

user_46522010

From version 4 you have to use d3.scaleTime()

user_116999570
Related