D3.js的v5版本入门教程（第九章）——完整的柱状图

最新推荐文章于 2025-02-16 21:15:14 发布

数星星等天明

最新推荐文章于 2025-02-16 21:15:14 发布

阅读量1.2w

点赞数 9

分类专栏： D3.js的v5版本入门教程文章标签： d3.js v5 v4 柱状图

本文链接：https://blog.csdn.net/qq_34414916/article/details/80032731

版权

D3.js的v5版本入门教程（第九章）

一个完整的柱状图应该包括的元素有——矩形、文字、坐标轴，现在，我们就来一一绘制它们，这章是前面几章的综合，这一章只有少量新的知识点，它们是

d3.scaleBand()：这也是一个坐标轴，可以根据输入的domain的长度，等分rangeRound域（类比range域）
d3.range()：这个比较复杂，建议去看百度（或者官方API），在这里我只讲一下这个返回一个等差数列

1、得到SVG画布

        var marge = {top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg");//得到SVG画布
    	var width = svg.attr("width");//得到画布的宽
    	var height = svg.attr("height");//得到画布的长
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");</