d3.js中v3到v4、v5因版本問題報錯

1、在d3js v4、v5版本中的線性比例尺不再使用d3.scale.linear()。而是使用d3.scaleLinear()來代替它。
即將

 let linear=d3.scale.linear() 
                .domain([min,max]) 
                .range([0,300]);   

改爲

let linear=d3.scaleLinear()   
                .domain([min,max])   
                .range([0,300]);    

2、報錯Cannot read property ‘ordinal’ of undefined

d3.rangeRoundBands (v3中) => 
d3.scaleBand()
  .rangeRound([range]); （v4、v5中）

**

 var xScale = d3.scale.ordinal()
 .domain(d3.range(dataset.length))
 .rangeRoundBands([0, width - padding.left - padding.right]);

改爲

 var xScale = d3.scaleOrdinal()
 .domain(d3.range(dataset.length))
 .range([0, width - padding.left - padding.right]);

3、報錯 TypeError: d3__WEBPACK_IMPORTED_MODULE_0__.svg.axis is not a function

 var axis = d3.svg.axis()
       .scale(linear)       //指定比例尺
       .orient("bottom")    //指定刻度的方向
       .ticks(7);           //指定刻度的數量

d3版本升級幹掉了之前的api，改成了新的更加規範的api
修改後代碼

     var axis = d3.axisBottom()
       .scale(linear)       //指定比例尺
       .ticks(7);           //指定刻度的數量

4、

d3.rangeBand()  =>
scale.bandwidth();

5、ease()指定過渡的方式，常用的有：
linear：普通的線性變化
circle：慢慢地到達變換的最終狀態
elastic：帶有彈跳的到達最終狀態
bounce：在最終狀態處彈跳幾次
調用時，格式形如： ease(“bounce”)。（v3）

=>.ease(d3.easeElasticInOut)表示過渡方式 ()