2017-03-30 Bruce Wang
最近身体不舒服,啥事不想做,与血常规检查接触的也多。发现自己把高中学的生物知识都还给老师了。 所以有必要来普及一下血液中重要的细胞的作用。 白细胞:杀灭细菌和病毒并监控身体的稳定,白细胞又分为下面4项 中性粒细胞:白细胞中最重要的成分,起吞噬和杀菌作用 淋巴细胞:专门对付难缠的病毒,病毒感染时,淋巴细胞一般会升高 嗜碱性粒细胞:机体过敏时,牺牲自己分泌大量的趋化因子,引起过敏反应 嗜酸性粒细胞:抑制过敏产生的副作用 红细胞:运输氧气和营养到全身器官,再把身体内的废物运出去 血红蛋白是红细胞中的一种蛋白,专门负责运输氧气,血红蛋白降低,意味着贫血。 血小板:凝血,止血 身体健康是最重要的,请爱惜自己! 继续阅读 »
2017-02-09 Bruce Wang
啥都不说, 直接先来一张效果图...... 小伙伴们,别急,咱们先来分析一下主要功能点: 图片预览 图片拖拽 图片缩放 图片裁剪 图片预览 图片预览的功能技术方案是将用户的图片文件转成Base64编码并设置到标签的src属性,获取图片文件的Base64编码需要通过HTML5的新特性FileReader,具体代码如下: js getImgBase64: function(imgFile, cb){ if(!window.FileReader){ alert('系统暂不支持针对你的浏览器的文件上传功能,建议使用最新版的Chrome!'); return false; } var reader = 继续阅读 »
2017-01-13 Bruce Wang
最近工作上接手了两个项目,可它们依赖的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前,需要做以下步骤: 卸载系统中已有的node.js 删除node.js安装目录(例如C:\Program Files\no 继续阅读 »
2016-12-25 Bruce Wang
又到了一年一度的圣诞节,每当到了这天就意味着这一年就要结束了,也意味着又长了一岁。其实我不是一个特别喜欢写年终总结的人,但对于我来说,2016是“不安分”的一年。当然这里的不安分加了引号,因为我今年经历了挺多事,也成长了很多,我用下面几个词来总结我的2016: 读书 运动 房奴 跳槽 恋爱和分手 Be myself 2015年末,我还没有买房的打算,在家人的催促下,我开始看了几个楼盘,但是也没有太过认真对待这件事。再后来,我妈和我姐来南京也一起看了几个小区,最终在2016年的第一天定下了房子,也算在南京扎根了!当然,非常感谢我姐的果断,也感谢亲戚的帮助。说实话,就在那天我脑子里转的是,“嗯,有了它就意味着我肩上的责任更大了,我也将 继续阅读 »
2016-12-20 Bruce Wang
最近给我的装备(Thinkpad S3-s431)升了一下级,将原本用来加速缓存的24G固态硬盘换成了128G。所以得重装系统,然后一堆软件也得重装。包括Node.js。 安装了最新的Node.js(v6.9.2),npm(v3.10.9)。由于node_modules里的文件夹结构太深,无法移动,只能去项目中使用npm install重新安装依赖,然后发现node_modules文件夹结构是这样的: 一个模块被分在了不同文件夹下,满足下好奇心,去看了npm的官方文档。 果然NPM开发团队还是解决了这个包冗余和包结构太深的问题,下面我们来看看他们是如何做的。 npm2以一种嵌套的方式安装所有的依赖,而npm3将所有依赖都 继续阅读 »
2016-12-05 Bruce Wang
最近兴趣所致翻译了一本英文的SVG教程,并将其托管在GitHub,部署于GitBook。为了给大家最直观的效果,献上教程部署地址:https://svg.brucewar.me。这也是我第一次翻译英文文档,也是我第一次使用GitBook部署电子书。教程虽然简单,但基本涉及了SVG的所有知识点。 喂喂喂,跑题了啊! 回到正题,因为部署电子书涉及的工具比较多,不必担心,我将按以下流程来各个击破: 本地生成电子书 托管GitHub 发布到GitBook 绑定自定义域名 本地生成电子书 GitBook官方提供了一个命令行工具(gitbook),可以使用git和markdown制作本地电子书并支持预览等功能。在安装这个命令行工具之前, 继续阅读 »
2016-11-29 Bruce Wang
从年初2月份到现在,我已经坚持跑步大半年了,虽然频率不高(平均一周跑三次,每次5公里),姑且算是坚持下来了。还记得刚开始是因为前同事(蕾爷和阿汤)的怂恿,让我一起报名参加上海松江的首届半程马拉松比赛,不过因为大家都是第一次跑,所以没敢报半程,最终报的是12km健康跑。也是当时脑子一热,让我将跑步坚持了这么久,并且参加了今年南京的马拉松,不过跑的是5公里。 题外话:没错,你看到就是蒋劲夫,他也是一个坚持运动的人,最近看的一档节目《真正的男子汉》也对他有所关注。 知乎里常常看到一些关于跑步的话题,如“坚持跑步到底有什么改变?”。所以我有时也会想问问自己,坚持跑步给我带来了什么改变,也就有了这篇文章。先说说生理上变化吧!我 继续阅读 »
2016-10-27 Bruce Wang
因为最近手上有个小的需求,设计一个可缩放和可拖拽的树形结构,我便去研读了D3官网给的一个树形的例子。 布局(Layout) 原本我以为理解了基本的选择器、元素操作、Enter、Exit就能去看实例的代码了,后来发现我错了,所以这里需要理解一下D3中布局(Layout)的概念。布局是D3中一个十分重要的概念,从布局衍生出很多图表。例如:饼状图(pie)、力导向图(force),树状图(tree)等等,基本实现了很多开源的可视化工具提供的图表。但是它又和很多可视化工具(如Echarts)有很大的不同。 相对于其它工具来说,D3较底层一点,所以初学者可能会觉得有点困难,但是一旦理解了D3布局的思想,使用起来,会比其它工具更加得心应手 继续阅读 »
2016-10-25 Bruce Wang
首先,我们先看一下最终的柱状图效果展示。如下图所示,一个完整的柱状图需要包含三个部分:矩形、文字、坐标轴。 添加SVG画布 ```js // 画布大小 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'); ``` 定义比例尺 js // define x 继续阅读 »
2016-10-24 Bruce Wang
简介 D3.js(后面简称D3,官方首页https://d3js.org/)是基于JavaScript开发的一套用于数据可视化工具,项目开源在GitHub,项目排名靠前。它提供了很多API,如DOM(Document Object Model)的一些操作,绘制图形等。截止本文发表时间,D3已更新到v4,v4在v3的基础上,有了很大的改变(因为v3只支持通过svg和dom构图,所以v4在v3的基础上增加了对Canvas的支持以及API的修改),本文使用的版本为v3的API。 Hello World html D3.js Hello World 继续阅读 »