- 博客(69)
- 收藏
- 关注
转载 JS 中的广度与深度优先遍历
现在有一种类似树的数据结构,但是不存在共同的根节点 root,每一个节点的结构为 {key: 'one', value: '1', children: [...]},都包含 key 和 value,如果存在 children 则内部会存在 n 个和此结构相同的节点,现模拟数据如下图:已知一个 value 如 3-2-1,需要取出该路径上的所有 key,即期望得到 ['three', 'three-
2018-01-18 14:19:11
3571
原创 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
433
原创 es6——let和const命令
let1.所声明的变量只在let命令所在的代码块内有效;2.不存在变量提升,存在暂时性死区(使用let声明变量,只要变量在还没有声明前使用,就会报错);3.不允许重复声明
2018-01-15 15:19:35
325
原创 父级高度未知,实现子元素居中
emmmm,使用弹性盒布局就好了哇~~~ 测试 .parent { display: flex; /*justify-content属性定义了子项目在主轴上(X轴)的对齐方式。*/ justify-content: center; /*align-i
2018-01-08 17:00:36
642
原创 UI设计网站逛逛逛
http://www.ui.cn/https://uiiiuiii.com/inspirations/uihttp://www.cssmoban.com/
2017-12-11 10:25:56
402
原创 cookie、session、webStorage(localStrorage、sessionStorage)
总概要:(1) Cookies是保存在客户端的小段文本,随客户端请求发送该url下的所有cookies到服务器端,在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。(2) Session则保存服务器段,通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器,服务器根据sessionID来识别客户端,再通过sessi
2017-11-29 11:34:23
1034
原创 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
815
原创 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
627
原创 傻瓜式学习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
904
原创 傻瓜式学习webpack(五)——css的抽离和html的自动引入js/css
一、以前面四篇文章为基础,我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前,首先要说明一下,如果没有第四篇文章为前提,也就是图片没有进行处理的话,在抽离css的时候,它将无法解析css中的url,所以在抽离之前,一定要进行图片处理。接下来开始干活。首先安装 extract-text-plugin插件。然后我们修改webpack.config.js文件,修改后如下:
2017-11-08 13:59:14
5326
原创 傻瓜式学习webpack(四)——图片处理
有了前面三章的基础,利用webpack处理图片也是同理的。一、首先你需要安装 file-loader和url-loader;二、在你的webpack.config.js中的代码添加处理图片相关的loader,添加后如下:module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index:
2017-11-06 13:10:34
935
原创 傻瓜式学习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
1745
原创 傻瓜式学习webpack(一)——建立项目
新建一个项目,并和webpack建立依赖二、cd到testTest目录下,执行npm init,如下图,对于package的信息设置你可以一直按回车,直至让你确认yes:这个时候,你再去查看package.json文件,发现它已经写入
2017-11-02 16:43:46
906
1
原创 SVG图案和渐变填充
在基本图形绘制中,我们只用了纯色为图形对象填充颜色和绘制轮廓。其实,出来纯色以外,我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。一、图案填充:我们首先来看图案填充,要使用图案,首先要定义一个水平或垂直方向重复的图形对象,然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile(瓷砖),因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。
2016-06-14 10:14:32
7531
原创 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
1996
原创 SVG标记元素的使用
举个栗子,展示一下使用格式: 注意:①元素自身不会显示,需要放在元素中,因为它是存放复用元素的;②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐,使得图像标记显示在精
2016-06-12 17:11:53
3076
原创 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
492
原创 SVG基本形状绘制总结
线段:矩形:圆角矩形:圆形:椭圆形:多边形:折线: //注意需把fill设成noneSVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero(默认值)和evenodd。其效果图分别如下:图1 nonezero(默认属性)图2 evenodd属性笔画特性:属性值
2016-05-23 14:26:07
2021
转载 d3.js——文本换行的封装
一、引用js文件或者二、函数的参数文件里实现了一个appendMultiText()函数,其个参数的意义为:appendMultiText( container, //文本的容器,可以是或 str, //字符串 posX, //文本的x坐标
2016-05-13 10:25:56
975
原创 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
6030
原创 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
949
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
2901
原创 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
1937
原创 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
15983
原创 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
9281
原创 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
3243
原创 d3.js——箭头的绘制
首先我们要明白如何在svg中进行箭头的绘制:先写一对,里面再写一对,其中marker的属性意义为:viewBox坐标系的区域refX, refY在 viewBox 内的基准点,绘制时此点在直线端点上(要注意大小写)markerUnits标识大小的基准,有两个值:strokeWidth(线的宽度)和userSpaceOnUse(图形最前端的
2016-05-09 14:21:23
11119
原创 d3.js——partition函数的参数
一、node():将根数据传入后,得到的节点的数组,每个节点添加8个参数:parent - 父节点children - 子节点value - 表示节点的大小,由下面 value() 函数指定的值,父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标(不一定指x轴方向,跟据 size() 函数的意义而定)y - 节点的y方向的坐标(同上)dx - x方向扩展的宽
2016-05-06 16:48:49
1797
原创 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
3665
原创 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
1748
转载 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
8156
转载 d3.js——用力学图表示人物关系
relation.json:{ "nodes":[ { "name": "云天河" , "image" : "SilenceImage/tianhe.jpg" }, { "name": "韩菱纱" , "image" : "SilenceImage/lingsha.jpg" }, { "name": "柳梦璃" , "image" : "SilenceI
2016-05-04 09:48:08
5333
转载 d3.js——csv表格的读取
一、在OpenOffice中编辑和保存csv文件(1) 首先,打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一样,OpenOffice 中编辑表示使用的是 Calc 。打开之后,像正常一样输入单元格的内容,假设输入如下:(2)点击“文件”,“另存为”。文件类型选择 “CSV 文本”,底下再勾选上“编辑筛
2016-05-03 10:08:48
3190
原创 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
7719
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
2607
原创 d3.js——树状图的绘制
树状图和集群图其实差不多,就一点点不一样,见下图:图(1):集群图——d3.layout.cluster()图(2):树状图——d3.layout.tree()这样一来差别就看出来了。由于两者的代码差不多,这里就直接附上树状图源码,不多加解释咯~city.json文件:{ "name":"中国", "children": [
2016-04-27 13:51:10
29470
11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人