- 博客(44)
- 收藏
- 关注
原创 D3.js研发分区柱状图
本文详细介绍了使用d3.js实现分区柱状图的开发过程,该图表将数据分为三个区间(0-0.2、0.2-0.3、0.3+)并用不同颜色区分。关键技术点包括:1) 双X轴实现技巧,隐藏常规X轴显示特殊X轴;2) 强制标注0.3关键值;3) 使用动态计算确定文本尺寸;4) 提供封装好的组件方法(CVDistributionBar)可直接调用。文章包含完整的代码实现,包括原始未封装版本和最终封装版本,并展示了参数配置、数据预处理、坐标轴处理等核心功能。该方案适用于需要突出显示特定阈值的数据可视化场景。
2025-06-12 16:38:31
284
原创 D3.js研发单柱分面柱状图
本文展示了一个基于d3.js研发的单柱分面柱状图实现方案,包含封装好的可调用方法。该方案支持动态调整分面位置(上方/下方)、自动计算布局,并提供了丰富的样式配置选项(如柱宽、颜色、标签字体等)。文章首先介绍了封装方法的使用方式,然后提供了一个未封装的HTML版实现示例,包含完整的数据预处理、坐标轴计算和可视化渲染逻辑。该图表适用于展示分类数据,特别强调了对分面(Matrisome_Division)的处理和可视化效果
2025-06-12 16:12:39
129
原创 d3.js研发两组比较的分面柱状图
本文介绍了一个基于d3.js封装的可定制分面柱状图组件,支持两组数据对比展示。主要功能包括:1) 可调整分面位置(上方/下方);2) 动态计算图表元素布局;3) 支持自定义样式参数(颜色、字体、尺寸等);4) 自动处理数据分组和排序。文章提供了完整的封装方法代码(CMCTwoGroup)和一个未封装的HTML版示例,两者都实现了分面背景块、旋转标签、数值标注等特性。该组件适用于需要展示分类数据对比的场景,可通过参数灵活控制图表样式。
2025-06-12 16:01:15
70
原创 js处理数据(过滤)
js处理数据(过滤),也可以说是筛选,就是要根据某些值去过滤数据中什么展示什么不展示,比如这里就是根据checkbox的值为true时展示,false时候就不展示(就要在数据中把相关数据过滤掉)
2024-06-21 16:54:57
545
原创 页面初次加载或刷新滚动条自动定位到最下面
页面初次加载或刷新滚动条自动定位到整个内容(或者某个div)最下面。应用于对话聊天框或者长页面等类似场景
2024-06-07 15:15:23
990
2
原创 html页面上点击图片放大
html页面上有的图片很小 想点击某个图片后把图片放大展示 这里是用wangediter后渲染的html页面(dangerouslySetInnerHTML这个方法直接渲染html页面),这里是用原生js获取dom元素和antd的弹框组件实现的
2024-06-07 13:51:40
859
原创 React Hooks 封装可粘贴图片的输入框组件(wangeditor)
React Hooks 封装可输入文字、粘贴图片的输入框组件(用的是wangeditor插件),隐藏很多wangeditor的功能因为我不需要 有需要的话可以不隐藏
2024-06-06 18:18:28
759
原创 axios get、post、put、delete、patch请求封装
axios get、post、put、delete、patch请求封装以及使用方案和例子
2024-03-23 15:43:59
613
原创 react+js 封装 可拖动弹框 无遮罩层
react+js 实现可拖动弹框 无遮罩层 弹框出现时下面内容也可点击 监听到切换路由时会自动关闭弹框
2023-08-05 15:20:07
598
原创 react结合js获取屏幕鼠标滚动等距离实现页面懒加载
react结合js获取屏幕鼠标滚动等距离实现页面懒加载 JS获取屏幕分辨率 及 窗口尺寸的方法
2023-03-14 12:01:20
1699
原创 判断鼠标移入移出页面某个元素(监听鼠标事件)
react页面 监听鼠标事件 判断鼠标移入移出页面某个元素 (jQuery)和JS 将数组里的所有字符串转换为数字(互相转换)
2023-03-13 16:07:55
2231
原创 react搜索框placeholder文字轮播
react antd 搜索框placeholder文字轮播 input聚焦失焦 搜索button时input默认值赋值
2023-03-12 16:54:05
1350
原创 Js基础 ES6+ 数组、对象的常用方法
ES6+中常用的处理数组和常用的处理对象的方法 map()、forEach()、filter()、find()、findIndex()、some()、reduce()、every()、Object.is()、Object.assign()、Object.keys()、Object.values()、Object.entries()、Set()、Map()等 ; 最后就是数组和对象使用的日常积累啦arr.map(Number)、arr.map(String)、lastIndexOf()
2023-02-10 17:33:41
1788
原创 前端处理数据 解决后端返回默认值后 默认值不显示的问题
下拉选择上下有联动关系,根据上面不同的选择展示下面不同的下拉框选项,再根据后端返回的数据显示对应默认值,前端处理数据解决后端返回默认值后默认值不显示的问题
2022-11-10 15:11:49
1114
原创 js不需要遍历获取数组最后一项和实际运用数组的方法实现添加删除功能
js不需要遍历去获取数组最后一项,例如在获取到文件路径时只需要后面的文件名,文件名是一个字符串,首先需要将路径字符串按斜杠分割为数组,然后拿到数组最后一项,注意拿到的也是一个数组,需要将它在转为字符串,下面还有一个实例运用~
2022-09-22 17:41:05
702
原创 js正则表达式初级和MDN学习小记
js正则表达式入门学习 语法规范和最近用到的比较少见的正则 慢慢积累 后续添加了js高级正则 MDN(正则表达式在 JavaScript 中的使用、正则表达式中的特殊字符、正则表达式中的替换)
2022-08-24 14:41:55
889
原创 create-react-app : 无法加载文件 C:\Users\DELL\AppData\Roaming\npm\create-react-app.ps1,因为在此系统上禁止运行脚本。
create-react-app : 无法加载文件 C:\Users\DELL\AppData\Roaming\npm\create-react-app.ps1,因为在此系统上禁止运行脚本。
2022-06-08 14:52:17
1216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人