- 博客(16)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 如何用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
28189
5
原创 D3 GEO应用专题(一):绘制旋转的3D地球
首先查看效果，见下图： 绘制3D地球的步骤如下： 1. 创建投影，并确定初始旋转角度； 2. 创建地球方格生成器; 3. 创建路径生成器path; 4. 渲染地球方格； 5. 渲染初始角度的地图； 6. 创建定时动画，更新投影的旋转角度； 7. 重绘地图；相关初始化代码如下所示：// 创建投影var projection = d3.geoOrthographic()
2017-05-30 21:27:58
7566
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
9001
原创 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
6206
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
9367
原创 巧用Function实现动态字符串模板
在前端模板的实际应用中，模板是提高效率的常用手段，但很多时候，模板可能不是预置的，而是只有在运行时才能决定，这时候就需要使用动态模板。使用场景如下： 1. 用户(配置人员)在页面输入HTML模板，并嵌入变量 2. 在特定条件下，编译HTML模板 3. 返回编译结果解决办法如下：// 假定用户输入的数据为htmlif(!!html && html.length > 1) { let
2017-05-12 16:22:23
1377
原创 升级到Spring Security 4.2的坑及解决办法
把框架从Spring Security从3升级到4，结果出现了一大堆错误，每一个都是巨坑，几个非常熟悉的问题，花了我几乎一整天的时间，下面一一说来。1. 验证始终无法通过输入正确的用户名与密码，却始终收到这样的异常：org.springframework.security.authentication.BadCredentialsException: Bad credentials at o
2017-05-12 16:05:29
9452
2
原创 ES安装X-pack后的默认账户与密码
ES安装x-pack后，默认的账户有三个，如下： 账户名 默认密码 权限 elastic changeme kibana changeme logstash_system changeme
2017-05-10 18:44:48
9783
原创 部署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关注的人