自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(70)
  • 收藏
  • 关注

转载 JS 中的广度与深度优先遍历

现在有一种类似树的数据结构,但是不存在共同的根节点 root,每一个节点的结构为 {key: 'one', value: '1', children: [...]},都包含 key 和 value,如果存在 children 则内部会存在 n 个和此结构相同的节点,现模拟数据如下图:已知一个 value 如 3-2-1,需要取出该路径上的所有 key,即期望得到 ['three', 'three-

2018-01-18 14:19:11 3160

原创 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 217

原创 es6——声明变量的6中方法

es5中:varfunction新增如下:constletclassimport

2018-01-15 16:08:30 1045

原创 es6——let和const命令

let1.所声明的变量只在let命令所在的代码块内有效;2.不存在变量提升,存在暂时性死区(使用let声明变量,只要变量在还没有声明前使用,就会报错);3.不允许重复声明

2018-01-15 15:19:35 225

原创 父级高度未知,实现子元素居中

emmmm,使用弹性盒布局就好了哇~~~ 测试 .parent { display: flex; /*justify-content属性定义了子项目在主轴上(X轴)的对齐方式。*/ justify-content: center; /*align-i

2018-01-08 17:00:36 380

原创 UI设计网站逛逛逛

http://www.ui.cn/https://uiiiuiii.com/inspirations/uihttp://www.cssmoban.com/

2017-12-11 10:25:56 280

原创 cookie、session、webStorage(localStrorage、sessionStorage)

总概要:(1) Cookies是保存在客户端的小段文本,随客户端请求发送该url下的所有cookies到服务器端,在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。(2) Session则保存服务器段,通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器,服务器根据sessionID来识别客户端,再通过sessi

2017-11-29 11:34:23 793

原创 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 561

原创 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 429

原创 d3——中文api

d3中文api

2017-11-13 14:16:06 414

原创 react学习入门

学习地址:https://doc.react-china.org/docs/introducing-jsx.html

2017-11-09 09:56:22 175 1

原创 傻瓜式学习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 612

原创 傻瓜式学习webpack(五)——css的抽离和html的自动引入js/css

一、以前面四篇文章为基础,我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前,首先要说明一下,如果没有第四篇文章为前提,也就是图片没有进行处理的话,在抽离css的时候,它将无法解析css中的url,所以在抽离之前,一定要进行图片处理。接下来开始干活。首先安装 extract-text-plugin插件。然后我们修改webpack.config.js文件,修改后如下:

2017-11-08 13:59:14 4242

原创 傻瓜式学习webpack(四)——图片处理

有了前面三章的基础,利用webpack处理图片也是同理的。一、首先你需要安装 file-loader和url-loader;二、在你的webpack.config.js中的代码添加处理图片相关的loader,添加后如下:module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index:

2017-11-06 13:10:34 785

原创 傻瓜式学习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 1506

原创 傻瓜式学习webpack(二)——配置webpack

webpack的配置

2017-11-03 14:12:54 320

原创 傻瓜式学习webpack(一)——建立项目

新建一个项目,并和webpack建立依赖二、cd到testTest目录下,执行npm init,如下图,对于package的信息设置你可以一直按回车,直至让你确认yes:这个时候,你再去查看package.json文件,发现它已经写入

2017-11-02 16:43:46 780 1

原创 SVG图案和渐变填充

在基本图形绘制中,我们只用了纯色为图形对象填充颜色和绘制轮廓。其实,出来纯色以外,我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。一、图案填充:我们首先来看图案填充,要使用图案,首先要定义一个水平或垂直方向重复的图形对象,然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile(瓷砖),因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。

2016-06-14 10:14:32 6378

原创 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 1631

原创 SVG标记元素的使用

举个栗子,展示一下使用格式: 注意:①元素自身不会显示,需要放在元素中,因为它是存放复用元素的;②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐,使得图像标记显示在精

2016-06-12 17:11:53 2656

原创 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 376

原创 SVG基本形状绘制总结

线段:矩形:圆角矩形:圆形:椭圆形:多边形:折线: //注意需把fill设成noneSVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero(默认值)和evenodd。其效果图分别如下:图1 nonezero(默认属性)图2 evenodd属性笔画特性:属性值

2016-05-23 14:26:07 1751

转载 d3.js——文本换行的封装

一、引用js文件或者二、函数的参数文件里实现了一个appendMultiText()函数,其个参数的意义为:appendMultiText( container, //文本的容器,可以是或 str, //字符串 posX, //文本的x坐标

2016-05-13 10:25:56 673

原创 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 4482

原创 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 679

原创 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 2452

原创 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 1542

原创 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 13964

原创 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 8059

原创 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 2757

原创 d3.js——箭头的绘制

首先我们要明白如何在svg中进行箭头的绘制:先写一对,里面再写一对,其中marker的属性意义为:viewBox坐标系的区域refX, refY在 viewBox 内的基准点,绘制时此点在直线端点上(要注意大小写)markerUnits标识大小的基准,有两个值:strokeWidth(线的宽度)和userSpaceOnUse(图形最前端的

2016-05-09 14:21:23 8456

原创 d3.js——partition函数的参数

一、node():将根数据传入后,得到的节点的数组,每个节点添加8个参数:parent - 父节点children - 子节点value - 表示节点的大小,由下面 value() 函数指定的值,父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标(不一定指x轴方向,跟据 size() 函数的意义而定)y - 节点的y方向的坐标(同上)dx - x方向扩展的宽

2016-05-06 16:48:49 1186

原创 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 2882

原创 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 1193

转载 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 7362

转载 d3.js——用力学图表示人物关系

relation.json:{ "nodes":[ { "name": "云天河" , "image" : "SilenceImage/tianhe.jpg" }, { "name": "韩菱纱" , "image" : "SilenceImage/lingsha.jpg" }, { "name": "柳梦璃" , "image" : "SilenceI

2016-05-04 09:48:08 4827

转载 d3.js——csv表格的读取

一、在OpenOffice中编辑和保存csv文件(1) 首先,打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一样,OpenOffice 中编辑表示使用的是 Calc 。打开之后,像正常一样输入单元格的内容,假设输入如下:(2)点击“文件”,“另存为”。文件类型选择 “CSV 文本”,底下再勾选上“编辑筛

2016-05-03 10:08:48 1871

原创 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 5947 1

转载 d3.js——绘制静态中国地图

绘制中国地图可分为三步:一 、绘制投影函数://球面的Mercator投影是常用的分片式映射库(例如OpenLayers 和Leaflet)。例如显示栅格分片与Mercator投影,它是正形投影的var projection = d3.geo.mercator() .center([107,31]) //用于设定地图的中心位置,[107,31] 指的是经度和纬度。 .sc

2016-04-28 10:57:22 2604 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 2027

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除