d3.js中v3到v4、v5因版本问题报错

最新推荐文章于 2021-08-30 11:20:57 发布

drunk喵咪

最新推荐文章于 2021-08-30 11:20:57 发布

阅读量2.8k

点赞数 4

分类专栏：可视化工具文章标签： d3.js关于比例尺报Cannot read property 'li

本文链接：https://blog.csdn.net/jdrunk/article/details/103494608

版权

8 篇文章 0 订阅

订阅专栏

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

关注