D3.js 入门教程1 基础 详细 一步步来 |
您所在的位置：网站首页 › d3暴龙机新手教程 › D3.js 入门教程1 基础 详细 一步步来 |
|
码字不易—口水少来–有用请好评-打赏也行喔 为了初学者，本文尽量细致再细致，觉得太啰嗦的大牛绕过----我膜拜您 需求：完整柱状图 备注：前奏选择器、比例尺、坐标轴等基础知识不在赘叙，下面会有相关链接； 推荐链接：别个的教程 https://blog.csdn.net/qq_34414916/article/details/80029352 正文开始： 本文旨在封装一个基于d3 多端适配的柱状图组件 所以大家看到的会是一个方法； 方法外壳： MendegBar = (DataObject) => { //移动端适配 预计padding以及width、height会通过一个胶着方法，以此判断是否进行适配 let { dom = "", height, width, padding = { top: 20, left: 20, bottom: 20, right: 20 } } = DataObject; if (dom === "") { console.log("dom不存在 ！"); } //padding:图表分组位置参数 //没有传入height时便获取dom的宽高 height ? null : height = d3.select(dom).node().getBoundingClientRect().height; width ? null : width = d3.select(dom).node().getBoundingClientRect().width; }首先需要画布，也就是即将展现数据的地方（区域），推荐使用svg //新建画布 let svg = d3 .select(dom) .append("svg") .attr("height", height) .attr("width", width) .style("background", "#fff");有了画布，我们得为以后的操作流出余地，也就是可能会出现一个画布好几个图表的情况发生，所以需要一个组，用来将我们的一个个图表装起来； //定义一个装图表的分组并且确定他的位置 svg.append("g").attr("transform", "translate(" + padding.top + "," + padding.left + ")").attr("background", "skyblue");数据，为方便学习，此处数据并未提出方法外 // 数据集 let data = [100,200,50,20,400,80];接下来就要考虑比例尺和坐标轴了 首先要明确一个概念 在d3中，比例尺有很多种，具体表现都是通过方法的 推荐一个常用比例尺的网站 https://segmentfault.com/a/1190000011006780 //为x轴 y轴添加坐标轴 该方法考虑抽出作为独立api d3.scaleBand() 序数比例尺 .domain()输入域 range() 输出域 // d3.range(0, 10, 1) 返回一个算数级数组 例如 [0,1,2,3.......9] (开始，结束，分度) //此处为省略了 开始（0） 分度（1） 采取他们的默认值 （0，data.length,1） d3.range(data.length) data.length为终止数 注意 生成序列并不包括 data.length // .rangeRound()设置比例尺的输出范围并四舍五入 // d3.scaleBand().domain(d3.range(data.length)).rangeRound([0,width-padding.left-padding.right]) // d3.scaleBand()比例尺的输入域是 [0,1,2,...,data,length-1] 输出域是 [0,500-20-20]; // scaleBand()序数比例尺 scaleLinear()线性比例尺 let xScale = d3.scaleBand() .domain(d3.range(data.length)).rangeRound([0, width - padding.left - padding.right]); // y轴输入域 [0,400] 输出域 [500-20-20,0] let yScale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height - padding.top - padding.bottom, 0]); // 坐标轴 // .axisBottom(canshu) 创建向下的坐标轴 参数是比例尺 axisLeft向左的坐标轴 let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); // 到这一步 柱状图的基本架子已经搭起来了，下面需要做的便是怎么把数据呈现了 //将坐标轴组件加入当前图表分组 g.append("g") .attr("transform", "translate(" + 0 + "," + (height - padding.top - padding.bottom) + ")") .call(xAxis); g.append("g") .attr("transform", "translate(0,0)") .call(yAxis);下面一步便是将数据呈现，那么我们就需要svg里的各种标签组件上手了。 //首先 为每一个数据（一个矩形）创建一个分组组g 这里出现一个概念 enter（） 这里的意思是根据数据补全g //本来g.selectAll(".rect") 是获取不到东西的 但是 .data(data).enter().append("g")以后 data有多少数据，我就给他补全多少g // 题外话：data（）将数据绑定到选择集上 let g_s = g.selectAll(".rect") .data(data) .enter() .append("g"); // console.log("神奇的enter",g_s);// 为了效果更明显 [g, g, g, g, g, g] // 现在正主来了 为数据画出一片天地 嘎嘎，就是矩形来着 //科普一下 svg的基础哈 /* svg 预定义形状元素 矩形 圆形 椭圆 线 折线 多边形 路径 高大上 ，就是条线而已 可以设置开始和结束哟 元素用于定义文本。 rect 的属性： rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色 x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） 在这里呢就是坐标轴的位置 咱自己的坐标轴 y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1） */ //这是每个矩形之间的距离 let rectPadding = 30; g_s.append("rect") .attr("x", function (d, i) { // d 数据 单项数据 i 索引 return xScale(i) + rectPadding / 2; // 这个意思还用我解释吗？还是解释一下吧，嘎嘎，我一定是个好老师 // 每一个rect "x" 属性的值 都等于 处于x轴的刻度的值（等差数列喔）加上 每个矩形之间的距离的一半喔 // xScale(i) 2 78 154 .. 然后第一个的x轴位置是多少呢 那当然是2啦 不过咱们得有间距 所以得加上间距 然后呢还得砍掉一半 // 别问我为什么，揍你 }) .attr("y", function (d) { return yScale(d); // 参照上面 强调依据 x y 相对于我们自己的坐标轴来的哈 }) .attr("width", function () { //科普一下哈 xScale.step() 这个得到的是每一个等差刻度的宽喔 这里是 76 //所以下面为什么会这么return 不用我再多说了吧 return xScale.step() - rectPadding; }) .attr("height", function (d) { console.log(d, yScale(400)); //这个呢，能看明白不 设置高 算了 为防止一些yt看不明白 小说一下 //总高度 - 上下空白 - yScale(d)（数据d时，y轴的输出是多少） //回顾y轴比例尺 [height - padding.top - padding.bottom, 0] 倒着来的喔 // 所以d越大，对应在y轴的值就越小 400 时 yScale(400)//0 //明白不，再不明白趴着让我打屁屁就明白了 嘿嘿 return height - padding.top - padding.bottom - yScale(d); }) .attr("fill", "skyblue");//这个呢就是矩形颜色的干活 （最近看个抗日剧、那剧情......） //最后 给每个矩形加上文字 /* 元素用于定义文本。 属性： 主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust x,y表示文本的横纵坐标。 dx,dy表示移动的横纵坐标。 rotate表示旋转的度数。 */ //下面的运算不在解释 g_s.append("text") .attr("x", function (d, i) { return xScale(i) + rectPadding / 2; }) .attr("y", function (d) { return yScale(d); }) .attr("dx", function () { (xScale.step() - rectPadding) / 2; }) .attr("dy", 20) .text(function (d) { return d; })至此一个完整的柱状图就已经完成了，下篇文章就是图表交互了，敬请期待。。。。。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |