关于d3.js代码的一些理解

最新推荐文章于 2022-03-19 00:56:22 发布

慢板协奏曲

最新推荐文章于 2022-03-19 00:56:22 发布

阅读量354

点赞数

文章标签： javascript css3 前端 d3.js

本文链接：https://blog.youkuaiyun.com/qq_41673649/article/details/122496977

版权

本文通过一个实例展示了如何使用D3.js库创建基本的条形图，并详细解释了链式调用的方法及每一步的作用，帮助读者理解D3.js的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let data=[232,432,543,654,453,543]
let svg=d3.select(’#barchart’)
.append(‘svg’)
.attr(‘width’,1000)
.attr(‘height’,320)
svg.selectAll(‘rect’)
.data(data)
.enter()
.append(‘rect’)
.attr(‘x’,(d,i)=>{return 20})
.attr(‘y’,(d,i)=>{return i*60})
.attr(‘width’,(d,i)=>{return d})
.attr(‘height’,(d,i)=>{return 10})
.attr(‘fill’,‘blue’)

 以此为例，链式写法每次都以选择的dom为基础往后运行，返回也是返回最后一个dom
d3.select('#barchart')
 .append('svg')
 这行代码返回的就是svg而不是id=barchart的这个dom，同时后面的  .attr('width',1000)
 .attr('height',320)也是作用在svg上。
 后面的代码同理，作用在rect上