Dosth_Magic

原创 数据可视化，仿写d3-selection，核心模块选择器（一）

evs-selection数据可视化以数据为主，那对数据集的选择就尤为重要，这个模块允许对DOM进行强大的数据驱动的转换，如设置属性(attributes)、样式、属性(properties)、html以及文本等，通过绑定和解绑数据，就可以直接添加和删除对应的元素。选取方法返回当前选择集或一个新的选择集，支持链式操作，例如设置当前文档的所有段落元素的类和颜色样式：evs.selectAll(...

原创 数据可视化，仿写d3-selection，核心模块选择器（二）

这部分承接上一篇，介绍d3-selection模块中的修改元素节点部分和命名空间。看源码戳selection模块结构选择元素修改元素(本章的内容)加入数据处理事件控制流局部变量命名空间(本章的内容)选择元素选择元素后，设置文档的不同属性，例如设置a的name和color：evs.select("a") .attr("name", "fred") .styl...

原创 数据可视化d3源码学习，仿写d3-dsv之数据解析模块

evs-dsv该模块为文本分隔符分隔进行解析，常见的数据格式为逗号分隔的csv文件或制表符分割的tsv文件，这些表格非常受excel欢迎，而且比json更节省空间，代码实现基于论文RFC 4180Common Format and MIME Type for Comma-Separated Values (CSV) Files. 感兴趣的可以访问github阅读源码及解析esv-dsvAPI...

原创 实习01

现在开始实习，昨天熟悉了一下代码，内部做的一个b端系统。相当于新的开始，好好把握。最好就按部就班踏踏实实的搞。没什么太大的问题，别犯错误就好。实习嘛，就要主动学习，所以也是打算每天记录一下学到了哪些东西。如何去更好的进步。...

原创 CSS布局学习 垂直居中 二栏布局 三栏布局 设置BFC

垂直居中设置position：relative和margin-top为负数设置div的transform:translateY(-50%)设置父元素display：flex，align-items:center,justify-content:center二栏布局float+margin-left实现：position:absolute+margin-left实现：float+...

原创 wepack官方文档指南笔记

极简入门webpack什么是模块？程序员将不同的功能的程序分为不同的模块。模块的特点： 使代码有更小的接触面，便于调试。当我们写出的模块提供可靠的抽象和封装后，使整个程序展现出清晰的架构和设计。webpack模块化,支持多种模块化方式:import语句ES2015require()语句CommonJSdefine和require语句AMDcss/sass/less文件中的@i...

原创 Javascript 编译原理 词法作用域 this 对象拷贝 不变性 存在性 遍历for of 类(混合对象) 混入 原型 反射 对象关联 行为委托 对与对象

编译原理 词法作用域 this 对象拷贝 不变性 存在性 遍历for of 类(混合对象) 混入 原型 反射 对象关联 行为委托 对与对象1、作用域形成的原因：变量存储在哪？如何找到？2、编译原理：编译：分词-解析：AST抽象语法树-代码生成:将AST转换为可执行代码。js的编译大部分发生在执行前几微秒，优化有JIT，延迟编译甚至实施重编译。1.2.RHS 获取变量的源值 LHS 找到变...

原创 11.28论文阅读

Color Names Across Languages: Salient Colors and Term Translation in Multilingual Color Naming Models使用新的颜色术语表示，消除不同语言对颜色的歧义。Viz-Blocks: Building Visualizations and Documents in the Browser该...

原创 js代码库整理

let-er ：代码转换器，找到let声明并进行转换Traceur:google,es6转es5

原创 2019前端面试

1.发布订阅模式2.process.next 执行顺序3.css垂直居中布局4.call实现bind奇安信：1.原型链2.http和websocket区别3.this和箭头函数4.前端解决跨域方法5.性能处理5.LocalStorage和sessionstorage的区别，浏览器是否共享美团1.http https pv关键词2.websocke...

原创 webgl基础概念

首先什么是webgl？webgl是一个光栅化引擎，绘制点，线和三角形。什么是顶点着色器和片段着色器？webgl是运行在GPU中的，需要提供能够在GPU上运行的代码，即顶点着色器和片段着色器，每一对组合称为一个着色程序program，顶点着色器计算定点位置，片段着色器计算图元中像素的颜色值。着色器怎么获取数据？属性Attributes和缓冲，通常包括位置，法向量，纹理坐标，顶点颜...

原创 交互式3D图形

CPU循环转数计算：电视机每帧一般20ms，如果GPU运行为2.8GHz，每秒运行56百万转，在一百万像素点下运行次数为56转每秒。2.8*10^9Hz*20ms=56000000cycles/1000000pixels=56cycles per pixel per frame颜色辨识：相机和人眼成像的区别：视锥：有多少像素？如果每秒60帧速率，1920*120...

原创 [8-16]每日学习总结]平凡代码人生

9点半到11点：看完深入浅出webpack的3节，总共完成了第一章，了解了plugin和devserver的功能。3点到5点：完成《深入理解ES6》的第四章，速记法属性定义，把name：name省略为name，计算属性名，可以在将非字面量的值指定为属性的名称，方法简写，省略冒号和function；并舍弃了对象字面量除服属性名的检查，重读的会覆盖。添加了Object。assign方法，一次性更改...

原创 [8-15每日学习总结]平凡代码人生

9点到10点：看完了两节深入浅出webpack的内容，学了webpack的安装以及构建命令，学习了loader的使用方法，对css进行解析，使用style-laoder时候有3种方式，一、使用use数组，内容是url querystring传入参数的字符串，二、使用use对象数组，可以是对象加options的形式，三、在源码中require的时候使用！加上loader进行解析例如，require(...

原创 js权威指南知识点整理

1.涉及return、break、continue语句后紧跟着换行，js会在换行处填补分号。后缀++和–前换行，会被当成下一个变量的前缀。2.类型分为原始类型和对象类型，原始类型number、boolean、string以及两个特殊的原始值null、undefined，对象类型object以及特殊对象数组和函数还有Data、RegExp、Error类。根据可以拥有方法分类，只有null和unde...

原创 react文档demo 交互式表格

使用props传递静态数据，state进行状态更新。import React from 'react';import ReactDOM from 'react-dom';// import './index.css';// import App from './App';// import * as serviceWorker from './serviceWorker';// ...

原创 Chinavisday-01

上午特约报告来自斯图加特的Thomas讲的题目是Visualization and Analysis of Large Scientific Data – New Approaches for Volumes, Flows, and Particles大部分都是关于科学可视化及GPU和CPU并行计算加速数据结果的计算，同时结合及机器学习。paper forward综合来说给人眼前一亮的...

原创 ES6 Proxy

Proxy概述用于修改某些操作默认行为，等同于在语言层面做出修改，元编程。实际上Proxy重载了点运算符var obj=new Proxy({},{ get:function(target,key,receiver){ console.log(`getting ${key}!`); return Reflect.get(target,key,receiver); }, set:...

原创 ES6 await

async函数含义他就是Generator函数的语法糖，generator函数读取两个文件const fs=require('fs');const readFile=function(fileName){ return new Promise(function(resolve,reject){ fs.readFile(fileName,function(error,data){ ...

原创 闭包数据缓存

else闭包，如下拉框数据如果缓存中有数据 则直接读缓存，如果没有 在进行查询var CachedSearchData = ( function(){ var cacheData = [], count=cacheData.length; return { getSearchData:function(id)...

原创 ES6 class

class基本语法class Point{ constructor(x,y){ this.x=x; this.y=y; } toString(){ return '('+this.x+','+this.y+')'; } }类的数据类型就是函数，类本身就指向构造函数，类的所有方法定义在prototype上.Obejct.assign可以方便向类添加多个方法。clas...

原创 tcpip协议概述

第一章概述分层TCP/IP通常被认为四层系统，应用层，运输层，网络层，链路层。1.链路层，有时也称数据链路层网络接口层，包括计算机设备驱动程序和计算机网络接口卡2.网络层，包括ip协议（网际协议），icmp协议（internet互联网控制协议），以及IGMP协议（internet组管理协议）3.运输层主要为两台主机应用程序提供端到端通信，tcpip协议族中，两个互不相同传输协议tcp传输...

原创 [数据可视化]d3js源码,selection(四)添加事件,控制流,局部变量

selection模块结构选择元素修改元素加入数据处理事件(本章的内容)控制流(本章的内容)局部变量(本章的内容)命名空间事件处理出于交互考虑，selection支持监听(listening)和分派(dispatching)事件。selection.on(typenames[, listener[, options]])根据typenames向元素添加或删除事件监听，类型...

原创 d3js源码解析,selection模块(三),数据是如何绑定到元素上的？

selection模块结构选择元素修改元素加入数据(本章的内容)处理事件控制流局部变量命名空间添加数据这部分开始介绍Join，讲解的两个文章selection.join notebookThinking With Joinsselection.data([data[, key]])讲述数据数组绑定到元素上，返回绑定成功的selection表示update状态，同时也定义了...

原创 数据可视化d3源码学习，仿写d3-fetch之数据读取

evs-dsv该模块为文本分隔符分隔进行解析，常见的数据格式为逗号分隔的csv文件或制表符分割的tsv文件，这些表格非常受excel欢迎，而且比json更节省空间，代码实现基于论文RFC 4180Common Format and MIME Type for Comma-Separated Values (CSV) Files. 感兴趣的可以访问github阅读源码及解析esv-dsvAPI...

原创 职责链模式

原创 深入学习D3JS: Arcs

arc生成器生成圆型或环，如果大于start到end大于260度会生成圆，否则扇形。数据可以从pie生成。这里插一句要想移动pie的位置，只能是translate g的位置。d3.arc()默认的生成器arc(arguments…)var arc = d3.arc() .innerRadius(0) .outerRadius(100) .st...

原创 深入学习D3JS：Stacks

stack用来生成多类型可重叠的数据的二维数组。适用于如下图表类型：stack生成器不会直接产生形状，它可以产生位置信息，然后传入area生成器或者直接使用。stack(data[,arguments…])根据输入的数据生成一个stack，返回一个表示每一个系列的数组，参数传播到访问器。用法如下：var data = [ {month: new Date(2015,...

原创 深入学习d3.js：d3-ease

ease是扭曲时间控制动画中运动的方法，常用与淡入淡出，使动画过度更平滑。ease方法实现中，输入一个标准时间t，返回一个ease化的时间，他们的范围都在0，1内，表示动画的开始和结束。ease(t)首先设置你的ease，然后在动画期间调用。// Before the animation starts, create your easing function.var custo...

原创 深入学习d3.js：d3-dispatch

这是d3设置的一种调度机制，类似于node里的eventEmitter。例如，要为开始和结束时间创建调度。var dispatch = d3.dispatch("start", "end");然后用on来注册回调函数。dispatch.on("start", callback1);dispatch.on("start.foo", callback2);dispatch.on...

原创 深入学习D3JS：d3-color

d3color对颜色进行操作，比如根据名字设置颜色，steelbluevar c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}转化为hsl格式var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}...

原创 深入学习D3JS：d3-axis

axis的用处就是给坐标轴添加标尺。通过事先定义好的scale，来绘制，所以要先了解scale对象的方法。后面在更。import {slice} from "./array";import identity from "./identity";var top = 1, right = 2, bottom = 3, left = 4, epsilon ...

原创 深入学习D3JS: d3-path

function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI);}使用canvas画图你需要上面的代码，d3.path可以让你在svg上使用类似代码画图。var context = d3.path();drawCircle(...

原创 nodejs 处理post文件数据 模拟上传

首先利用http创建一个server，监听到8080端口，之后我们可以打印req.headers查看headers的内容，post的数据格式一般为：------WebKitFormBoundaryLIXOJt36aIHyhrvqContent-Disposition: form-data; name="username"1------WebKitFormBoundaryLIXOJt...

原创 关于nodejs 模块导入导出module exports require

require导入module1，查找的模块如果为路径会在当前目录查找2，如果当前目录有node_modules文件下，会搜索该文件夹，然后搜索系统node_modules1.jsconst mod1=require('mod1');let p=new mod1(99);到处方式：1.直接导出exports.a = 12;2.导出为函数或者类：// expo...

原创 nodejs 原生js模拟注册登陆 用到模块http、url、querystring

模拟服务器端的get，post，文件请求。利用jquery，ajax get模拟注册和登陆。server.jsconst http=require('http');const url=require('url');const querystring=require('querystring');const fs=require('fs');let user={};h...

原创 深入学习D3JS：d3-array Transformations部分

d3.rollup(iterable, reduce, …keys)将可迭代的值转化为Map，转化结果从key到value，并支持嵌套。function dogroup(values, keyof) { const map = new Map(); let index = -1; for (const value of values) { const key = keyof...

原创 深入学习D3JS：d3-array Search部分

d3.scan(iterable[, comparator])返回数组最小值下标，具体见上一部分。d3.bisectLeft(array, x[, lo[, hi]])返回x在数组中的插入点，lo，hi为可选数组范围，默认为整个数组，如果x已经存在返回该值左侧。d3.bisector(comparator)d3.bisector(accessor)这里构造一个平分器，可以向个人构造的对...

原创 深入学习D3JS：d3-array Statistics部分 d3.min, d3.max,d3.extent,d3.sum,d3.scan,d3.ascending,d3.deviation

本着学习d3js的原则，对函数用法做出解释，对源码写出自己的理解，文章最后补充一些源码中用到的JS语法，欢迎各位批评指正，学习交流！多多评论共同进步！d3.min(iterable[,accessor])根据顺序返回可迭代对象中的最小值，如果没有可以比较的值，返回undefined. 可选访问函数等价于调用Array.from(Array.from用法，将类似于数组的对象转化为数组，要求该...

原创 JS创建对象

虽然Object构造函数或者对象字面量都可以创建单个对象，，明显的缺点是使用一个接口创建很多对象，会产生大量的重复代码。一、工厂模式function createPerson(name, age, job){ var o = new Obejct(); o.name=name; o.age=age; o.job=job; o.sayName=fun...