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)表示过渡方式 ()

你可能感兴趣的:(可视化工具,read,property,'li)