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

Question

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?

Answer 1

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