- 博客(29)
- 收藏
- 关注
RSS订阅原创 d3.js绘制地图，支持点击等事件
目前项目中遇到的需求是画出一个静态地图，并支持一些基本的点击事件，此次是使用d3.js制作的（d3真的从入门到放弃了），话不多说直接上代码吧，可以直接复制下来就可以用的。一些扩展的功能大家可以自由发挥，d3.js官网（
2023-11-30 17:30:00
862
原创 element 饿了么el-date-picker时间组件如何限制只能选某一月份范围
最近遇到一个对时间选择的范围限制，对传入的任意一个月份时间，限制只能选当月范围内的，查了一下资料大部分是限制当前月份的。对时间的处理，我这里使用的是vue3框架，直接使用的setup语法糖。
2023-11-04 16:58:59
1549
原创 d3.brush() 区域选择效果
作用：Brush 的功能是用来选取图表上的某一个区间，我们对此区间段内的元素做 (变色、移位、放大缩小等等)，类似于放大镜功能，适用于图表的某一块区域特殊处理之类的需求。这个方法是用来设定可以框选的范围，[x0, y0] 是设定左上角位置，[x1, y1]则是设定右下角位置。// .classed("className", boolearn)方法是动态给选定的元素添加类名，依据布尔值进行判断是否添加。// 设置brush事件，效果是选中区域内的圆fill填充色变红。// 划取区域结束点的坐标。
2023-08-21 17:53:19
338
原创 d3.zoom()缩放功能
当我们使用 D3 设定缩放功能时，它其实同时包含了平移跟缩放两种功能，我们能使用鼠标的滚轮或手指触控的方式在画面上进行相对应的操作。使用d3.zoom（），返回值是一个zoom方法，所以需要连带使用selection.call()方法，将其绑定到dom上。// 此外可以使用上面不同的api方法调整缩放效果。// 监听缩放事件 event是拿到的dom元素。// 监听缩放事件 event是拿到的dom元素。// 设置鼠标双击生效时间。// 设置viewBox。// 取消滑轮缩放事件。//设置缩放最大比例。
2023-08-20 17:39:01
1157
原创 D3.js 拖拽功能实现 (drag)
前面我们知道，使用select.all（）可以获取到选择的元素的一个集合，selection.call(function[, arguments…无论指定函数的返回值是什么，call操作符总是返回当前的选择，所以我们可以对选择的元素进行相关操作。3.拖拽事件的步骤：开始拖拽 drag.on(‘start’)；方法用来创建拖拽事件， d3.drag() 会返回一个drag方法，然后在使用selection.call()这个方法将返回的拖拽事件绑定到对应的元素上。所以是有必要了解一下drag拖拽的方法。
2023-08-13 11:59:01
945
原创 vue实现下载文件百分比实时显示效果
工作中经常会遇到下载文件的需求，如果一般的大小还可以很快的下载下来，但是如果报表类的文件，一般都会比较大，这时候就会等很久才可以下载完成，但是用户可能并不知道目前下载的情况，可能会以为没有下载成功，频繁点击，所以网上搜索了一下，整理了目前比较常用的显示下载进度的方式，目前是使用VUE+elementUi+Axios 实现的。这个是我公司的下载接口，可以看到已经是很慢的了，体验并不好，所以加一个能实时显示进度的功能，这样用户也能有感知。一定要有Content-Length！
2023-08-08 20:37:34
2380
3
原创 数组对象取出某一属性相同的元素，返回对应数组的方法
最后得到的结果如下，这个是没有将数组解构前的,此处是根据网上的方法创作而来，其实有很多去重的方法，这个算是代码比较少的。
2023-07-29 00:34:11
865
原创 D3.js 鼠标事件
其实我们大家都比较熟悉js原生的鼠标事件，像鼠标点击/移动等事件，因为d3归根结底是操作的dom元素，所以一样是可以使用鼠标事件的，使用selection.on（）这个API即可。// 这里的this是获取到的对应的rect元素。// 这里的this是获取到的对应的rect元素。// 这里的this是获取到的对应的rect元素。// 返还的数值是一个数组，返回x y坐标。// 这一步是生成一个矩形元素。// 获取对应的rect元素。// 获取svg元素的节点。// 可以添加动画效果。
2023-07-23 23:51:41
972
原创 D3.js transition动画基本操作
主要是使用 selection.transition( ) 这个 API 来处理动画，由于是操作dom元素，因此要先用select() 的方法选定 DOM 元素后，才能将动画绑定到返回的 selection 实体上。transition.ease( ) 的参数必须是一个方法，用来设定动画每一帧的时长，借此达到不同的动画效果。// 这里的this是取到的rect这个元素。// 这里的this是取到的rect这个元素。// 可以使用不同的效果完成动画。// 设置动画持续时间。// 设置位移的距离。
2023-07-23 00:33:48
667
1
原创 D3.JS中常用的绘制图形的的API
D3.JS中常用的绘制图形的的API其实SVG 提供的图形标签（圆形、矩形、线条、路径等）其实只是构成图形的基本元素，一张完整图表则是由几百个这些小元件组成的，如果只使用 SVG 提供的图形，就需要很辛苦地一个一个建立图形，才能完成一张图表。为了省去这个麻烦，D3 创建了很多不同的 API 来协助建构复杂图形/图表，常用的 有如下几种。
2023-07-20 00:18:22
391
原创 D3.js 操作数据的常用API方法
在画图表时，大部分时候后端回传的数据都是需要我们做进一步处理的（当然能搞定后端的人就随意啦), 这里介绍一些基本常用的API操作，其实大部分都是js中的Array操作的一些方式。D3 Number Formats 处理数字方法 ， 其实跟js中操作数据的差不多 大家可以参考下官网。D3 Time Formats 时间类别。d3.timeParse() 格式化日期。官方文件 官网查询对应的方法。
2023-07-17 23:49:00
170
1
原创 d3—select.data数据操作原理
这两个方法都是一起出现的，没有单独使用 d3.data() 的情况. d3.selection().data()1.enter（）方法：这个方法会返还一个 enter selection，这个 enter selection 用来抓出缺失的DOM元素，以匹配多多余的数据，当取到缺少dom元素的数据后，需要使用append()方法将缺少的dom元素加进去，这里的data跟元素不一致，就可以看到对应的_enter 虽然是有四个，但是前两个是empty不存在后面的才是绑定到的data数据的元素。
2023-07-16 19:06:33
545
1
原创 d3—Selection选择器
D3 的 selection 跟JQuery一样，都是使用 css 选择器去选 DOM 上的元素 (element)，因此使用过 JQ 的人，会比较熟悉使用d3.selection选择对应的元素后，它会返还一个 selection 的物件实体 (或是如果画面上没有元素的话，会建立一个新的实体)，之后就可以使用这个实体拥有的函式去调整它的子集合。类似js函数中的链式调用语法D3 selection 的运作方式是:指定好 Dom 树位置并选取特定元素将资料绑订到指定元素。
2023-07-16 16:22:37
411
1
原创 d3.js-坐标轴 知识梳理学习
* 这里的 tickSizeOuter 或 tickSizeInner 需要一起设置，否则会出现刻度线不一致的情况，会挡住下面的刻度标签内容，如果需要单独设置其中一种，就需要设置 tickPadding。注意这里的tickPadding 默认的距离是3。除了 DOM 元素，也要搭配比例尺去計算出轴线的最大和最小值，才知道轴线要画多长、刻度要怎么计算。想要系统学习d3.js绘图方法，这里记录一下基础相关教程，更多详尽教程请访问。inner:表示内部刻度线的长度；4.ticks刻度的设置。
2023-07-16 12:06:53
878
1
原创 svg学习笔记整理（超详细-非原创）
代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。这里就是不使用viewBox的原始大小，就是矩形图的原始大小，原始位置。
2023-06-29 20:18:50
300
原创 el-select 多选框如何自适应宽度，不换行
el-select下拉框的宽度自适应，基于element框架的select进行重新处理，不改动源码，只调整部分样式
2023-05-05 16:29:42
5671
原创 el-table表格设置show-overflow-tooltip后导致单元格居中失效的问题！
可以看到并没有居中。个人理解是每列的宽度是根据表头进行计算的，设置居中后会直接根据单元格内容进行居中，但是如果加了show-overflow-tooltip属性后，就会强制一行显示，会造成这种问题，不知道理解对不对。解决办法也挺简单，重新给它写样式，但是一定要加!important。否则是无效的，如果表格嵌套或者是复用的，建议不要使用，以免造成样式污染错乱了。以前使用element的el-table组件时，如果要内容和表头都居中，一般是直接设置表头和单元格属性。就可以实现相关功能。
2023-03-03 18:59:54
1284
原创 el-input实现宽度跟随输入内容自适应
/ 这个方法有点不那么自然，如果输入英文和中文，会造成有一点间隙的存在，如果大家优化的话可以自行发挥，能力有限这个是最简单的版本…使用slot :Select 组件头部内容。然后设置样式即可，不用监听，展现效果上会比较好一点。1.首先我们可以获取输入内容的宽度，然后给定一个span标签，使其的宽度撑开input的宽度。如果默认直接使用，这里的input输入框的宽度是width：100%。继承它的父级的宽度。这里需要实时监听输入内容的宽度。
2022-11-05 21:24:41
7017
原创 element中select下拉框如何实现宽度自适应
然后使用这个内容代替原来的选择框默认内容，覆盖掉原来的样式，达到自适应的母的。测试提了一个优化需求，使用下拉框选择时 ，根据选择的内容实现自适应的效果;如果使用element自带的select的选择器模块，它默认的select选择框的宽度是固定的。1.不能给输入框直接设置固定宽度，考虑动态获取选择内容的宽度，然后再赋值给选择框的宽度样式，没有这样操作，感觉会比较麻烦，刷新的话会存在问题。那么我们要做的效果是这样的，select选择框的宽度随着你选择的内容变化而自适应的。给用户的操作感觉会比较好。
2022-11-05 19:24:28
9320
7
原创 动态增减表单，如何禁止时间选择重复的方法
前段时间做了一个需求，对一个循环生成的form表单，里面的时间做选择时，要求时间选择区间禁止重复，前面的文章中我有分享过这一篇，但是测试给我提了一个bug。针对于循环生成的问题。时间只是禁止不会跟当前操作的form表单重复，不会跟其他form表单校验。
2022-10-30 19:11:48
387
原创 React 中如何在非组件的函数中使用history的hooks函数
然后就可以使用了，具体原理是react的router路由是有三个rouuter,BrowserHistory,hashHistory。 在utils下面新建一个history.js文件。 在App.js中引入history。 在request.js拦截器中。
2022-10-23 18:50:33
749
原创 v-for动态渲染数组，增减数组后页面高度不发生变化的原因——与页面添加的水印有关！！！
其实原因很简单:引入的添加水印的方法：只会渲染页面已存在内容的水印，如果对内容做动态删减，则不会渲染，也会占一部分的空间，但是打开调试时找不到这块区域的。最近在做需求的过程当中，碰到了这样一个问题，Vue框架的页面，使用v-for循环出form表单，并且可以对每一块的表单做动态删除。2.给v-for循环的div加上key值，这里的key用Math.random()生成一个随机数，失败(此处的key是唯一的，与上面原因类似，list变化后，会造成数据重新更新渲染)3.找百度了，然后没有。
2022-10-12 00:00:02
480
原创 动态增减表单，页面下滑到新增表单处并附带滑动效果
开发中经常会遇到动态删减表单的需求，新增时表单会在最下面，内容比较多的话就会需要额外拖动鼠标，体验不是很好，所以用scrollHeight获取高度后，再进行滑动。可以根据需求不同获取不同位置的高度，进行滑动。scrollTo方法适用性还是比较多的。
2022-10-11 14:41:09
155
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人