- 博客(16)
- 资源 (5)
- 收藏
- 关注
原创 如何用SVG做出背景填充效果(avatar)
在绘制图谱时,需要在圆圈中填充图片,且不能重复,效果如下: 实现的代码如下:<defs> <!-- 这里的width、height都是相对的比例,所以1也代表100% --> <pattern id="patter-0" height="1" width="1" patternContentUnits="objectBoundingBox"> <!-- 这里的w
2017-05-31 20:37:42 13395
原创 为什么canvas绘制的线条会模糊、有锯齿?
有如下的代码:<style type="text/css"> canvas { position:absolute; height : 100%; width : 100%; }</style><canvas id="canvas" width="100%" height="100%"></canvas><script type
2017-05-30 22:24:51 28198 5
原创 D3 GEO应用专题(一):绘制旋转的3D地球
首先查看效果,见下图: 绘制3D地球的步骤如下: 1. 创建投影,并确定初始旋转角度; 2. 创建地球方格生成器; 3. 创建路径生成器path; 4. 渲染地球方格; 5. 渲染初始角度的地图; 6. 创建定时动画,更新投影的旋转角度; 7. 重绘地图;相关初始化代码如下所示:// 创建投影var projection = d3.geoOrthographic()
2017-05-30 21:27:58 7568 1
原创 JS constructor探讨(一):为什么要设置prototype.constructor?
每次实现JS的继承时,代码里必有如下两句:// 用于设置原型Employee.prototype = new Person()// 设置原型的构造器Employee.prototype.constructor=Employee实现原型链就靠第一句话,但第二句话有什么用呢?先看示例代码:function Person(username) { this.username = usern
2017-05-30 13:52:58 6848 1
原创 D3 force(力导向图)研究之二:如何布局超过十万个节点的图谱
基于SVG利用力导向图对节点进行布局,容易导致布局失败的原因有两个: 1. 计算节点位置耗费大量的CPU,导致页面操作冻结; 2. 添加DOM节点到SVG元素时,渲染、重绘会耗费大量的GPU,导致页面直接崩溃;针对以上的情况,可以采取如下策略: 1. 布局过程中,在页面只显示节点; 2. 布局过程中,在页面同时显示节点与连线; 3. 布局过程中不显示节点与连线,布局完成后显示; 4. 将
2017-05-29 22:12:52 16204 5
原创 理解SVG的缩放、偏移的计算公式
SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角,所以如何理解与计算SVG中元素的真实位置就比较难,下面的例子都以圆(circle)为例。1.缩放假定缩放的比例为s,执行缩放后,圆的圆心坐标由(cx, cy)变为(cx * s, cy * s)2. 偏移假定偏移的距离为(x1, y1), 执行单纯的偏移后,圆的圆心坐标由(cx, cy)变为(cx + x1, cy + y1)3. 先偏移后缩
2017-05-29 12:07:00 9002
原创 D3 force(力导向图)研究之一:完美融合拖拽与缩放
本文采用的d3版本为第四版,4.9.1先看实例效果,见图1, 在对节点进行缩放后,依旧能够做到以下两点: 1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随; 2. 缩放拖拽后,节点的位置依旧正确,利于数据保存; 再看操作失败的例子,见图2。 对现象进行分析,我们可以发现: 1. 鼠标跟随无差异,拖拽操作正常; 2. 节点位置正常; 3. 连线的更新状态错误;继续诊断,我们可以得出这
2017-05-29 11:48:05 11459 4
原创 如何在地图上打点数百万条数据
要将大量数据打点到地图上,原以为添加多个IFrame,充分利用多进程的优势,可以增加打点的数量与速度,结果大相径庭,Iframe数量越多,性能越差,具体测试数据如下,消耗时间单位为毫秒: 打点数量\窗口数量 1个窗口 4个窗口 16个窗口 100000 517 1167 3662 200000 1622 3319 5342 400000 3241
2017-05-28 11:28:31 6208 1
原创 怎么判断一个构造函数有多少个实例
如果想知道构造函数被实例化了多少次,最常用的方法如下:// 声明构造函数var count = 1function User(username) { this.username = username count ++;}表面上看起来没有问题,其实会产生两个缺陷: 1. 此函数被只是作为函数调用,而不是作为构造函数; 2. count暴露在外,容易被无意修改改进方法如下:/
2017-05-24 17:51:10 1604
原创 JS中String()与new String()的差异浅析
今天看到这样的面试题,如下:var yiifaa = 'yiifaa', str1 = new String(yiifaa), str2 = String(yiifaa)声明与赋值了3个变量,然后考题如下:// 请确认以下的判断是否准确str1 === yiifaa//str2 === yiifaa//typeof str1 === typeof str2根据JS的语法,
2017-05-24 17:50:25 9370
原创 巧用Function实现动态字符串模板
在前端模板的实际应用中,模板是提高效率的常用手段,但很多时候,模板可能不是预置的,而是只有在运行时才能决定,这时候就需要使用动态模板。使用场景如下: 1. 用户(配置人员)在页面输入HTML模板,并嵌入变量 2. 在特定条件下,编译HTML模板 3. 返回编译结果解决办法如下:// 假定用户输入的数据为htmlif(!!html && html.length > 1) { let
2017-05-12 16:22:23 1378
原创 升级到Spring Security 4.2的坑及解决办法
把框架从Spring Security从3升级到4,结果出现了一大堆错误,每一个都是巨坑,几个非常熟悉的问题,花了我几乎一整天的时间,下面一一说来。1. 验证始终无法通过输入正确的用户名与密码,却始终收到这样的异常:org.springframework.security.authentication.BadCredentialsException: Bad credentials at o
2017-05-12 16:05:29 9458 2
原创 ES安装X-pack后的默认账户与密码
ES安装x-pack后,默认的账户有三个,如下: 账户名 默认密码 权限 elastic changeme kibana changeme logstash_system changeme
2017-05-10 18:44:48 9789
原创 部署ElasticSearch环境的几点注意
1. 避免以root账户启动ESElasticSearch是不能以root账户进行启动的,所以必须切换到其他的用户# 创建单独的存放目录mkdir elastic# 改变目录的拥有者chown yiifaa elastic# 改变目录的拥有组chgrp yiifaa elastic# 解压ES,最好以压缩包的方式进行安装,一来容易管理,一来能避免许多不必要的错误# 以指定目录的方式进行
2017-05-10 18:44:01 752
原创 Webpack dev server热加载失败的解决办法
利用Webpack dev server作为热加载服务器时,出现以下错误:XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested res
2017-05-10 16:52:26 9705
原创 webpack-hot-middleware热加载相关错误的解决办法
错误1:找不到__webpack_hmrGET http://127.0.0.1/__webpack_hmr 404 (Not Found)在webpack的entry配置添加引用路径’webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true’,相关的参数最好不要省略,否则会出现无法自动刷新的问题。处理脚本
2017-05-10 16:51:15 17851
syntaxhighlighter可执行库与示例
2016-07-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人