- 博客(69)
- 收藏
- 关注
RSS订阅转载 JS 中的广度与深度优先遍历
现在有一种类似树的数据结构，但是不存在共同的根节点 root，每一个节点的结构为 {key: 'one', value: '1', children: [...]}，都包含 key 和 value，如果存在 children 则内部会存在 n 个和此结构相同的节点，现模拟数据如下图：已知一个 value 如 3-2-1，需要取出该路径上的所有 key，即期望得到 ['three', 'three-
2018-01-18 14:19:11
3545
原创 es6——数值的扩展
1、二进制的表示：前缀（0b）,八进制的表示（0o）2、Number.isFinite()、Number.isNaN()3、Number.parseInt()、Number.parseFloat()4、Number.isInteger()、Number.EPSILON5、Number.isSafeInteger()6、Math对象的扩展（1）Math.trunc()：去除一
2018-01-17 15:13:36
401
原创 es6——let和const命令
let1.所声明的变量只在let命令所在的代码块内有效；2.不存在变量提升，存在暂时性死区（使用let声明变量，只要变量在还没有声明前使用，就会报错）；3.不允许重复声明
2018-01-15 15:19:35
314
原创 父级高度未知，实现子元素居中
emmmm，使用弹性盒布局就好了哇~~~ 测试 .parent { display: flex; /*justify-content属性定义了子项目在主轴上（X轴）的对齐方式。*/ justify-content: center; /*align-i
2018-01-08 17:00:36
627
原创 UI设计网站逛逛逛
http://www.ui.cn/https://uiiiuiii.com/inspirations/uihttp://www.cssmoban.com/
2017-12-11 10:25:56
388
原创 cookie、session、webStorage(localStrorage、sessionStorage)
总概要：(1) Cookies是保存在客户端的小段文本，随客户端请求发送该url下的所有cookies到服务器端，在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。(2) Session则保存服务器段，通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器，服务器根据sessionID来识别客户端，再通过sessi
2017-11-29 11:34:23
1014
原创 sass函数功能
一、字符串函数1、unquote()函数：删除引号//SCSS.test1 { content: unquote('Hello Sass!') ;}.test2 { content: unquote("'Hello Sass!");}.test3 { content: unquote("I'm Web Designer");}.test4 {
2017-11-22 15:51:42
785
原创 sass自学入门总结
首先分享一个便利的在线编辑sassmeister一、输出方式同样的一份sass代码：nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px;
2017-11-21 16:56:43
592
原创 傻瓜式学习webpack（六）——一个项目多个webpack
webpack-gulp,webpack-loaders资料分享webpack的配置文件并没有固定的命名，也没有固定的路径要求，如果你直接用webpack来执行编译，那么webpack默认读取的将是当前目录下的webpack.config.js如果你有其它命名的需要或是你有多份配置文件（比如你可以配置webpack.base.conf.js、webpack.dev.conf.jswebpack.prod.conf.js三个环境的webpack），
2017-11-08 14:58:24
870
原创 傻瓜式学习webpack（五）——css的抽离和html的自动引入js/css
一、以前面四篇文章为基础，我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前，首先要说明一下，如果没有第四篇文章为前提，也就是图片没有进行处理的话，在抽离css的时候，它将无法解析css中的url，所以在抽离之前，一定要进行图片处理。接下来开始干活。首先安装 extract-text-plugin插件。然后我们修改webpack.config.js文件，修改后如下：
2017-11-08 13:59:14
5297
原创 傻瓜式学习webpack（四）——图片处理
有了前面三章的基础，利用webpack处理图片也是同理的。一、首先你需要安装 file-loader和url-loader；二、在你的webpack.config.js中的代码添加处理图片相关的loader，添加后如下：module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index:
2017-11-06 13:10:34
910
原创 傻瓜式学习webpack（三）——添加css样式
在前面两篇文章的基础上，我们还可以进行css样式的添加，很简单：一、在webpack.config.js的loaders里面添加style-loader和css-loader，添加后的文件内容如下：module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index: './view/inde
2017-11-03 16:02:21
1723
原创 傻瓜式学习webpack（一）——建立项目
新建一个项目，并和webpack建立依赖二、cd到testTest目录下，执行npm init，如下图，对于package的信息设置你可以一直按回车，直至让你确认yes：这个时候，你再去查看package.json文件，发现它已经写入
2017-11-02 16:43:46
891
1
原创 SVG图案和渐变填充
在基本图形绘制中，我们只用了纯色为图形对象填充颜色和绘制轮廓。其实，出来纯色以外，我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。一、图案填充：我们首先来看图案填充，要使用图案，首先要定义一个水平或垂直方向重复的图形对象，然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile（瓷砖），因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。
2016-06-14 10:14:32
7506
原创 SVG路径命令总结
命令参数效果M mx y 移动画笔到给定坐标，即起点L lx y 绘制一条到给定坐标的线，可提供多组坐标绘制折线H hx绘制一条到x坐标的横线V vy绘制一条到y坐标的竖线A arx ry（半径） x-axis-rotation（x轴的旋转角度） large-arc-flag（若需要圆弧
2016-06-13 09:55:13
1970
原创 SVG标记元素的使用
举个栗子，展示一下使用格式： 注意：①元素自身不会显示，需要放在元素中，因为它是存放复用元素的；②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐，使得图像标记显示在精
2016-06-12 17:11:53
3056
原创 SVG——坐标系统的变换整合
变换描述translate(x,y)平移操作，若x或y没指定，则为0scale(a,b)或scale（m）缩放操作rotate(angle)或rotate(angle,cx,cy)绕原点（或指定点（cx,cy））旋转translate（-cx*(m-1),-cy*(m-1)）;scale(m)绕指定点（cx，cy）进行缩放
2016-05-24 14:31:56
477
原创 SVG基本形状绘制总结
线段：矩形：圆角矩形：圆形：椭圆形：多边形：折线： //注意需把fill设成noneSVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：图1 nonezero（默认属性）图2 evenodd属性笔画特性：属性值
2016-05-23 14:26:07
1991
转载 d3.js——文本换行的封装
一、引用js文件或者二、函数的参数文件里实现了一个appendMultiText（）函数，其个参数的意义为：appendMultiText( container, //文本的容器，可以是或 str, //字符串 posX, //文本的x坐标
2016-05-13 10:25:56
948
原创 d3.js——文本换行
常规设置： var width = 400, height = 400; var str = "云中谁寄锦书来，雁字回时，月满西楼"; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height)
2016-05-13 10:06:33
5906
原创 d3.js——选择集与数据绑定模板应用
var dataset = [30,43,120,87,99,167,142]var width = 500, height = 500;var rectWidth = 30, rectStep= 35;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
2016-05-12 11:30:21
892
1
原创 d3.js——选择集与数据的绑定
一、使用datum（）绑定数据 Fire Water Wind var p = d3.select("body").selectAll("p"); p.datum("Thunder") //绑定字符串Thunder到选择集上 .text(f
2016-05-11 15:59:02
2869
原创 d3.js——饼状图的拖拽
常规定义：var width = 500, height = 500;var dataset = [30,10,43,55,13]var color = d3.scale.category10()var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height)
2016-05-10 14:52:47
1902
原创 d3.js——图形缩放平移操作
缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, {cx:250,cy:200,r:30}] var svg = d3.select("body").append("svg") .attr("width",wi
2016-05-10 10:38:43
15934
原创 d3.js——图形拖拽操作
拖拽操作 var width =2000, height = 2000; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) var color = d3.scale.cate
2016-05-10 09:55:38
9231
原创 d3.js——直方图的绘制及过去知识点的结合
//随机生成数据var rand = d3.random.normal(0,25)var dataset = [];for (var i = 0;i <100;i++){ dataset.push(rand());}一、直方图数据转换函数：//数据转换var bin_num = 15var histogram=d3.layout.histogram()
2016-05-09 17:10:44
3199
原创 d3.js——箭头的绘制
首先我们要明白如何在svg中进行箭头的绘制：先写一对，里面再写一对，其中marker的属性意义为：viewBox坐标系的区域refX, refY在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）markerUnits标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的
2016-05-09 14:21:23
11048
原创 d3.js——partition函数的参数
一、node()：将根数据传入后，得到的节点的数组，每个节点添加8个参数:parent - 父节点children - 子节点value - 表示节点的大小，由下面 value() 函数指定的值，父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标（不一定指x轴方向，跟据 size() 函数的意义而定）y - 节点的y方向的坐标（同上）dx - x方向扩展的宽
2016-05-06 16:48:49
1757
原创 d3.js——圆形分区图
var width = 600, height = 400, radius = Math.min(width, height) / 2 , color = d3.scale.category20();var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",
2016-05-06 12:54:28
3613
原创 d3.js——矩形分区图
/** * Created by Silence_C on 2016/5/4. */var width = 600, height =400;var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) .append("g");var color
2016-05-04 15:13:58
1723
转载 d3.js——关于力学图d3.layout.force的参数
size()用于设定力学图的作用范围，使用方法为 force.size( [ x , y ] )，这个函数用于指定两件事：重力的重心位置为 ( x/2 , y/2 )所有节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间（但并非之后也是如此）如果不指定，默认为 [ 1 , 1 ] 。linkDistance()指定结点连接线的
2016-05-04 10:11:42
8110
转载 d3.js——用力学图表示人物关系
relation.json：{ "nodes":[ { "name": "云天河" , "image" : "SilenceImage/tianhe.jpg" }, { "name": "韩菱纱" , "image" : "SilenceImage/lingsha.jpg" }, { "name": "柳梦璃" , "image" : "SilenceI
2016-05-04 09:48:08
5290
转载 d3.js——csv表格的读取
一、在OpenOffice中编辑和保存csv文件（1） 首先，打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一样，OpenOffice 中编辑表示使用的是 Calc 。打开之后，像正常一样输入单元格的内容，假设输入如下：（2）点击“文件”，“另存为”。文件类型选择 “CSV 文本”，底下再勾选上“编辑筛
2016-05-03 10:08:48
3134
原创 d3.js——绘制动态中国地图
可拖动的地图 .link { stroke: #ccc; stroke-width: 1; }一、常规设置：var width = 1000, height = 1000;var svg = d3.select("body").append("svg") .attr("width",width)
2016-04-29 14:34:39
7646
1
原创 d3.js——绘制打包图
打包图其实就是画圈圈，就把数据通过d3.layout.pack()转换一下即可咯~ 打包图/** * Created by Silence_C on 2016/4/27. */var width = 600, height = 600;//定义数据转换函数var pack = d3.layout.pack().size([width,he
2016-04-27 14:50:29
2572
原创 d3.js——树状图的绘制
树状图和集群图其实差不多，就一点点不一样，见下图：图（1）：集群图——d3.layout.cluster()图（2）：树状图——d3.layout.tree()这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~city.json文件：{ "name":"中国", "children": [
2016-04-27 13:51:10
29364
11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人