啥都不说， 直接先来一张效果图……小伙伴们，别急，咱们先来分析一下主要功能点：图片预览图片拖拽图片缩放图片裁剪图片预览图片预览的功能技术方案是将用户的图片文件转成Base64编码并设置到<img>标签的src属性，获取图片文件的Base64编码需要通过HTML5的新特性FileReader，具体代码如下：123456789101112getImgB ...

最近工作上接手了两个项目，可它们依赖的node版本不同，于是想到了之前用的nvm（Node Version Manager）。https://github.com/creationix/nvm之前安装nvm的方式是通过npm install nvm，而新版本可以通过脚本或者手动安装。目前，nvm没有提供windows的支持，但是在其文档中提到了nvm-windows这个工具。https://github.com/coreybutler/nvm-windows安装在安装nvm-windows前，需要做以下步骤：卸 ...

又到了一年一度的圣诞节，每当到了这天就意味着这一年就要结束了，也意味着又长了一岁。其实我不是一个特别喜欢写年终总结的人，但对于我来说，2016是“不安分”的一年。当然这里的不安分加了引号，因为我今年经历了挺多事，也成长了很多，我用下面几个词来总结我的2016：读书 ...

最近给我的装备（Thinkpad S3-s431）升了一下级，将原本用来加速缓存的24G固态硬盘换成了128G。所以得重装系统，然后一堆软件也得重装。包括Node.js。安装了最新的Node.js（v6.9.2）,npm（v3.10.9）。由于node_modules里的文件夹结构太深，无法移动，只能去项目中使用npm install重新安装依赖，然后发现node_modules文件夹结构是这样的：一个 ...

最近兴趣所致翻译了一本英文的SVG教程，并将其托管在GitHub，部署于GitBook。为了给大家最直观的效果，献上教程部署地址：https://svg.brucewar.me。这也是我第一次翻译英文文档，也是我第一次使用GitBook部署电子书。教程虽然简单，但基本涉及了SVG的所有知识点。喂喂喂，跑题了啊！回到正题，因为部署电子书 ...

从年初2月份到现在，我已经坚持跑步大半年了，虽然频率不高（平均一周跑三次，每次5公里），姑且算是坚持下来了。还记得刚开始是因为前同事（蕾爷和阿汤）的怂恿，让我一起报名参加上海松江的首届半程马拉松比赛，不过因为大家都是第一次跑，所以没敢报半程，最终报的是12km&# ...

因为最近手上有个小的需求，设计一个可缩放和可拖拽的树形结构，我便去研读了D3官网给的一个树形的例子。布局（Layout）原本我以为理解了基本的选择器、元素操作、Enter、Exit就能去看实例的代码了，后来发现我错了，所以这里需要理解一下D3中布局（Layout）的概念。布局是D3中一个十分重要v ...

首先，我们先看一下最终的柱状图效果展示。如下图所示，一个完整的柱状图需要包含三个部分：矩形、文字、坐标轴。添加SVG画布12345678910111213141516// 画布大小var width = 400,height = 400;// 画布四个方向上的留白var margin = { top: 20, right: 30, bottom: 20, left: 30};var chart = d3.select('.chart').attr('width', width).attr('height', height).append('g');定义比例尺12345// define x,y point rulevar x = d3.scale.ordinal().rangeRoundBands([0, width - margin.left - margin.right]);var y = d3.scale.linear().range([ ...

简介D3.js（后面简称D3，官方首页https://d3js.org/）是基于JavaScript开发的一套用于数据可视化工具，项目开源在GitHub，项目排名靠前。它提供了很多API，如DOM（Document Object Model）的一些操作，绘制图形等。截止本文发表时间，D3已更新到v4，v4在v3的基础上，有了很大的改变（因为v3只支持通过svg和dom构图，所以v4在v3的基础上增加& ...

介绍一下你自己和所做的工作我叫王金龙，是一名初级（按照工作年限来说的话）Web前端开发，但是以开发经历来说，我至少应该算一名合格的前端攻城狮。目前在途牛旅游网工作（已经寻找到新的追求）。读书的时候，接触的东西比较少，心里所想唯有学习，所以也就没培养任何一h ...