DecemberCafe-CSDN博客

原创 Node.js响应Ajax的POST请求并保存为JSON文件

目的使用D3.js开发的前端应用，用户与图交互更改图的内容后，如何在下一次加载的显示上一次最后交互的内容？本文提供通过后端的Node.js程序提供一种最小化方案，作为参考。开发环境后端：Node.jsNode.js模块：Express、body-parser、fs前端：JQuery后端1.安装nodejs，装好后用显示版本号确认是否安装好node --version2.新建一工程目录（文件夹

2017-02-18 09:56:42 4183

原创 Sublime Text 3快捷键排行榜

Sublime Text 3是强大、轻巧、美观的编码工具，适当使用快捷键能提高工作效率。本文将常用快捷键做个排名，让想要记忆的人有个先后顺序。1.注释单行注释：Ctrl + / 多行注释：Ctrl +Shift + / 注释功能毫无疑问是最常用的，排第一没有疑问。2.复数选择Ctrl + D 选择多个相同的内容，笔者是因为它才开始用Sublime的，排第二。3.缩进向左：Ctrl + [ 向

2017-02-04 18:58:38 1216

原创 Sublime Text 3配置JavaScript开发环境

Sublime Text 3可以不通过浏览器运行JavaScript，但是需要配置环境。安装NodeJS首先需要一个解析JavaScript代码的环境，下载NodeJS：https://nodejs.org/配置Sublime Text 31.选择 Tools → Build System → New Build System… 2.将文件名保存为node.Sublime-build 内容修改为

2017-02-03 17:53:00 10851

安装模块npm install d3 jsdomD3.js是操作DOM来作图的，要在Node.js里使用需要像jsdom这样的模块。绘制一个圆var d3 = require('d3');var jsdom = require('jsdom');var document = jsdom.jsdom();var svg = d3.select(document.body).append('svg')

2016-12-24 11:18:04 6792

转载版本号的命名方法

整理自：http://semver.org/版本格式版本格式：主版本号.次版本号.修订号，版本号递增规则如下：主版本号：当你做了不兼容的 API 修改次版本号：当你做了向下兼容的功能性新增修订号：当你做了向下兼容的问题修正先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。由0开始的版本主版本号为零（0.y.z）的软件处于开发初始阶段，一切都可能随时被改变。这样的

2016-12-23 14:36:05 734

原创 Node.js输出HTTP请求

用浏览器查看HTTP请求是怎样的用浏览器的调试窗口可以查看。以Chrome为例，F12打开调试窗口点击Network标签在地址栏输入网址：http://www.decembercafe.org/下方出现很多请求文件，随便点击一个即可。右方输出窗口，点击Request Headers的view source 即可以看到HTTP请求（Http Request）的代码GET / HTTP/1.

2016-12-23 11:45:07 2235

原创 Apache2 同源策略解决方案 - 配置 CORS

什么是同源策略现在的浏览器大多配有同源策略（Same-Origin Policy），具体表现如下：浏览某一网站，例如 http://www.decembercafe.org/。这个网页中的 Ajax 请求（XMLHttpRequest）试图获取另一个网站（例如 http://www.csdn.net/）的数据时，会发生错误。

2016-11-23 11:38:02 2504

原创 Nginx转发地址解决跨域问题

什么是跨域问题在一个服务器A里放置了json文件，另一个服务器B想向A发送ajax请求，获取此文件，会发生错误。Chrome提示：XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is theref

2016-11-20 14:17:11 12418

原创 Nginx下css的链接问题

放在 Nginx 下的网页代码，在链接外部 css 文件时，可能出现没有链接成功的问题。需要在 nginx.conf 里的 http 下添加一行。http {include mime.types;

2016-11-20 14:13:21 1677

原创 nginx 基本操作

nginx 是什么nginx 是轻量、高性能的网页服务器，相较 Apache 占有内存小。

2016-11-20 14:12:05 1523

原创 SVG裁剪和平移的顺序

SVG 里为元素添加 clip-path 属性即可做出裁剪效果，添加 transfrom 属性可以平移、旋转元素。根据需求不同，有两种情况：先裁剪元素，再把裁剪后的图形平移先平移元素，再按区域裁剪图形先裁剪再平移在实际元素的位置添加clip-path属性，则是先裁剪。<defs> <clipPath id="myclip" clip-rule="evenodd"> <r

2016-11-05 21:29:34 1534

原创 SVG文档的注意事项

SVG 是 HTML5 关于描述矢量图的元素。可以写在<html> </html>中，也可以保存为一个单独的.svg文件。单独作为一个svg文件的时候，有一点规则需要注意。<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="50" fi

2016-11-05 21:23:55 1083

原创 Sublime Text 3安装插件指南

Sublime Text已经很用得很广泛，一般普通的功能已经够用，加入一些插件能些许加快开发。安装 Package Control有了插件控制器Package Control安装起来就很轻松了。安装方法：https://packagecontrol.io/installation步骤如下：（1）打开Sublime Text，按Ctrl + ` 打开控制台。（2）在控制台粘贴指令（这是Sublime

2016-10-26 20:13:43 636

原创不让padding影响元素的宽度

CSS3 新增了 box-sizing 属性。以前，如果指定 div 的宽度为div { width: 100px; height: 100px; padding: 10px; }则包含 padding，div 的实际宽度为 120px。有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS

2016-10-26 19:11:55 10726

原创 Canvas旋转元素

Canvas是HTML5的画布元素，有时需要按指定角度旋转某一个元素。var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");//x,y为旋转的圆心,theta为角度（弧度，范围0~2π）ctx.translate(x, y);ctx.rotate(theta);ctx.transl

2016-10-26 19:09:10 1689

原创 bxSlider 在网页里添加幻灯片效果

幻灯片效果在网页上很常见，本文介绍用 bxSlider 轻松实现的方法。

2016-10-15 20:39:44 1188

原创 CSS3 里添加自定义字体

添加自定义字体是从 CSS3 开始的，下载到的字体可以在网页中使用。

2016-10-15 20:34:20 1634

原创 Canvas 获取颜色值

Canvas 是 HTML5 的画布元素，按照像素绘制图像。有时需要用户点击鼠标的时候获取像素值。

2016-10-15 20:19:04 6706

原创 Sublime Text 2 安装主题的方法

下载一个主题，如何在Sublime Text 2 里应用它？

2016-09-19 12:57:24 2338

原创 Windows 10下Chrome不能启动的问题

Chrome突然不能启动了，点击图标也没反应，打开任务管理器，发现点击图标后，Google Ghrome短暂地出现，随即消失。如何解决？

2016-09-18 18:28:05 6501

原创 GIMP简介

GIMP简介1. GIMP是什么GIMP(GNU Image Manipulation Program)是跨平台的图像编辑软件，支持 Linux、OS X、Windows 以及更多操作系统。在图像编辑领域另一款著名的软件是 Photoshop，俗称的“P图”，正是指用 Photoshop 对图片进行美化。Photoshop 能做什么，我想不必过多介绍。那么 GIMP 呢？简而言之， Photos

2016-04-03 08:37:49 4935 1

原创写给 Rapid D3.js 的评论

数据可视化作为大数据应用的一个分支，随着大数据时代的到来得到了飞速发展。各种各样的开发库如雨后春笋般出现，单是前端方向就不下百种。D3.js无疑是此中翘楚，是在世界范围内最受广泛认可的前端可视化工具，Github上的排名就是有利的佐证。我最早接触D3是在2013年，距离D3发布仅仅两年，是我到日本留学的第二年。在一门叫做项目演习的课程上，四人的一组在三个月内需要完成一件作品。我被组长分配的任务是做

2016-03-25 12:33:57 2311

原创 Discuz 如何开启 memcache

Discuz 是中国常用的两种论坛系统（另一种是 PHPWind）。本文讲述在 Discuz 中开启 memcache 的步骤，开启 memcache 后能大大加快用户访问 Discuz 的速度。安装 memcached 和 php5-memcachesudo apt-get install memcached php5-memcache开启 memcache打开论坛目录下的 config/conf

2016-03-10 14:56:23 4857 1

原创 Sublime 的中文乱码问题

Sublime 的中文乱码问题Sublime Text 是现在最受欢迎的文本编辑器，没有之一。它非常简洁，而且对各种代码的高亮显示很美观。但是，它默认不支持 GBK、Shift-JIS 等中文、日本编码格式，故打开此类文件会出现乱码。安装 Package Control首先要安装一个包控制器（Package Control），这是一个用于安装各种插件的包。安装方法参见官网：Package Contr

2016-01-05 17:03:03 3316

原创 D3.js 飞速入门-吕之华-专题视频课程

D3.js 是近年来流行的数据可视化开发库。本课程从零开始，讲解 D3.js 的基础、柱形图、坐标轴、折线图、散点图、以及简单的布局应用。

2015-11-16 08:32:08 850

原创写书是怎样的经历

2014 年 11 月，电子工业出版社的编辑找到我，说希望写一本关于 D3.js 的书。其后，经过 6 个月的撰写和 3 个月的修订，近期已经正式发售。这段经历，令我有很多比学习技术本身更珍贵的感悟。特此撰文，希望能把这一段经历的前因后果、以及我的想法分享给大家。

2015-09-30 09:57:08 3587 16

原创【 D3.js 视频系列】飞速入门

本教程共包含 6 个视频，目的是为了帮助初学者快速入门，以便阅读本站其他文章。本教程的名称为“飞速入门”，是为初学者准备的，其中包括了 D3 开发中最基础的知识。对 D3 掌握得较好的朋友不必观看本教程。本系列的具体内容如下，点击标题即可进入百度云页面观看。如果百度云网盘的在线播放中出现清晰度不足的情况，请下载后再观看。1. 第一个D3程序D3的简介和安装、服务器软件的安装、初学者应注意的问题、一

2015-08-24 06:24:07 11663 1

原创怎样看待比自己强的人

怎样看待比自己强的人这个时代对于学 IT 的人来说是幸运的。一个普通的程序员可以相对轻易地找到工作，可以轻易拿到比其他行业高得多的工资，甚至自己创建世界级的企业亦非空想。马云、马化腾等企业家的成功，似乎时刻提醒人们：即便是草莽出身的人，也能通过努力令世界瞩目。马云自己也说过：“如果我能成功，那么中国 80% 的人都能成功”。美国有科学研究表明，95% 的男人认为自己比其他人聪明。更何况中国人从小就耳

2015-07-12 20:07:50 2853 5

原创【 D3.js 高级系列】总结

高级系列的教程已经完结，特此总结。月初的时候曾说过本月内完结高级教程，今天是最后一天，算是可以交差了。O(∩_∩)O~如此一来，【入门】-【进阶】-【高级】三个系列的教程算是完成了。本教程的目的在于提供一个网络的、免费的学习系列，希望大家能喜欢。在写文章的过程中，笔者对于 D3.js 的理解也在逐步加深。因此，写在前面的文章一定比后面的文章要差，虽然部分经过了修改，但是还没有系统性修正的时间。现在

2015-06-30 19:57:06 4259 2

原创【 D3.js 高级系列 — 10.0 】思维导图

思维导图的节点具有层级关系和隶属关系，很像枝叶从树干伸展开来的形状。在前面讲解布局的时候，提到有五个布局是由层级布局扩展来的，其中的树状图（tree layout）和集群图（cluster layout）布局制作出来的图具有“树形”。因此，可以凭借这两种布局来制作思维导图。

2015-06-30 19:09:49 17217 1

原创 OpenGL 顶点缓存对象

顶点缓存对象（Vertex Buffer Object，简称 VBO），允许开发者根据情况把顶点数据放到显存中。如果不用 VBO，用 glVertexPointer / glNormalPointer 来指定顶点数据，这时顶点数据是放在系统内存中的，每次渲染时，都要把数据从系统内存拷贝到显存，消耗不少时间。实际上很多拷贝都是不必要的，比如静态对象的顶点数据是不变的，如果能把它们放到显存里面，那么每次

2015-06-19 13:15:33 2908

原创 OpenGL顶点数组

OpenGL中，如果要绘制图元，一般来说会使用 glVertex3f。但是，如果顶点数太多，这种方法需要频繁调用函数，效率太低。这就要用到顶点数组。

2015-06-19 13:13:50 2437

原创【 D3.js 高级系列 — 9.0 】交互式提示框

一般来说，图表中不宜存在过多文字。但是，有时需要一些文字来描述某些图形元素。那么，可以实现一种交互：当用户鼠标滑到某图形元素时，出现一个提示框，里面写有描述文字。这是一种简单、普遍的交互式，几乎适用于所有图表。通过可给提示框定制外观，能给用户带来很好的体验。1. 提示框的制作思路提示框，就是“文字”加“边框”。显示文字，一般来说用 SVG 的，但是，有两个问题：如果字符串过长，元素不能自动换行，虽

2015-06-15 21:03:36 13110 4

原创【 D3.js 高级系列 — 8.0 】标线

有时候，需要在地图上绘制连线，表示“从某处到某处”的意思，这种时候在地图上绘制的连线，称为“标线”。

2015-06-13 08:43:37 4615 1

原创【 D3.js 高级系列 — 7.0 】标注地点

有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。1. 标注是什么标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(108, 30)处画一个符号，这些都属于标注，也可以将标注理解为“点元素”。我们知道，只知道经纬度是不能直接在地图上作图的，需要先用投影函数将其转换成像素坐标。例如，如果要在中国地图上标出“北京”的位置

2015-06-06 08:40:09 9968

原创【 D3.js 高级系列 — 6.0 】值域和颜色

在【入门 - 第 10 章】作了一张中国地图，其中各省份的颜色值都是随意赋值的。如果要将一些值反映在地图上，可以利用颜色的变化来表示值的变化。1. 思路例如，有值域的范围为：[10, 500]现希望10用浅绿表示，500用深绿表示，10到500之间的值用浅绿和深绿之间的颜色表示。显然，此处需要一个函数，传入的参数是10到500之间的值，返回值是浅绿到深绿之间的颜色值。【高级 - 第 5.1 章】介

2015-05-20 17:48:34 12024 2

原创【 D3.js 高级系列 — 5.1 】颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器，只需给出两端的颜色值即可。1. 颜色插值在【高级 - 第 5.0 章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，var a = d3.rgb(255,0,0); //红色var b = d3.rgb(0,255,0); //绿色 var compute

2015-05-09 08:35:29 19128 1

原创【随笔】 D3 难吗？

有不少朋友说学 D3 挺难的。为什么呢？想写一篇文章分析分析。

2015-04-29 19:14:04 3670 5

原创【 D3.js 高级系列 — 5.0 】颜色

颜色是作图不可少的概念，常用的标准有 RGB 和 HSL，D3 提供了创建颜色对象的方法，能够相互转换和插值。RGB色彩模式是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255，因此总共能表示16777216(256 * 256 * 256)种，即一千六百多万种。几乎包括了人类所能识别的所有颜色，是最广泛也是最容易理解的颜

2015-04-19 19:17:51 11758

原创大数据时代需要转变的思维

大数据时代要转变的思维：要分析所有数据，而不是少量的数据样本；要追求数据的纷繁复杂，而不是精确性；要关注事物的相关关系，而不是因果关系。

2015-04-11 09:44:48 3245

空空如也

空空如也