D3.js的v5版本入门教程（第八章）—— 坐标轴

最新推荐文章于 2024-08-12 08:35:44 发布

数星星等天明

最新推荐文章于 2024-08-12 08:35:44 发布

阅读量1w

点赞数 2

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

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

版权

本文是D3.js v5入门教程的第八章，讲解如何使用D3.js创建坐标轴。通过`d3.scaleLinear()`定义比例尺，`d3.axisBottom()`创建坐标轴，并使用`call()`函数将坐标轴应用到SVG元素上，实现向下朝向的坐标轴绘制。同时，文章展示了在柱状图中添加坐标轴的方法。

摘要由CSDN通过智能技术生成

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

D3中没有现成的坐标轴图形，需要我们自己用其他组件拼凑而成。D3中提供了坐标轴组件，使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单

为了表绘制一个坐标轴，我们还是需要以下新的知识点

call()函数

定义一个坐标轴

坐标轴是有朝向的，在这里我们以向下朝向、水平方向的坐标轴为例，其他朝向的（比如向左朝向的、垂直的坐标轴）类似，这里是接着上一章来的，数据用的也是上一章的

//为坐标轴定义一个线性比例尺
    	var xScale = d3.scaleLinear()
    		.domain([0,d3.max(dataset)])
    		.range([0,250]);
    	//定义一个坐标轴
    	var xAxis = d3.axisBottom(xScale)//定义一个axis，由bottom可知，是朝下的
    		.ticks(7);//设置刻度数目
    	g.append("g")
    		.attr("transform","translate("+20+","+(dataset.length*rectHeight)+&