4 Beijiyang999

尚未进行身份认证

暂无相关简介

等级
TA的排名 4w+

数据可视化:在 React 项目中使用 Vega 图表 (二)

上一篇讲了如何在 React 项目中用 Vega-Lite 绘制基本的 area chart 图表。本篇将介绍如何绘制多层图表,如何添加图例。多层图表通过上一篇文章,我们知道了可以通过 mark, encoding 等来描述我们想要的图表。要实现多层图表,只需要把多个包含上述属性的图表对象放进 layer 数组中就可以。就像栈一样, 从栈顶压入,后压入的(index 大的)图层在上层。我...

2019-10-29 22:31:42

数据可视化:在 React 项目中使用 Vega 图表 (一)

相关包打开搜索引擎,一搜 Vega,发现相关的包有好几个,Vega, Vega-Lite, Vega-Embed,React-Vega 等等,不免让人头晕。别急,它们之间的关系三四句话就能说明白,以下是极简介绍:Vega:一套数据可视化的语法。它强大、灵活。用 JSON 描述配置,以 Canvas 或者 SVG 出图。Vega-Lite:一套描述 Vega 配置的语法。它简易、快速。同样...

2019-10-16 20:47:13

用 reduce 实现一行代码深拷贝对象/数组

一行实现深拷贝数组const deepCopyArr = arr => arr.reduce((acc, cur) => ( cur instanceof Array ? [...acc, deepCopyArr(cur)] : [...acc, cur]), [])一行实现深拷贝对象const deepCopyObj = obj => Object.entries...

2019-05-23 05:47:21

经典闭包题目ES7新解

题目for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(new Date, i) }, 1000)}console.log(new Date, i)输出:5 (1s)5 5 5 5 5如何变成: 5(1s)0(1s)1(1s)2(1s)3(1s)4经典解法闭包fo...

2019-05-02 05:43:31

垂直居中:两方向,四方法,条条大路通罗马

垂直居中常见的四种方法总结两条路,即 flex box 或者 绝对定位。四种方法,分别如下:方法一: flex box#container{ display: flex; justify-content: center; align-items: center;}方法二:绝对定位2.1 先把顶点移动到中心,再挪回自身长宽的一半(transform-translate)...

2019-03-07 19:26:06

JavaScript实现简单的二叉树中序遍历(class / prototype 写法)(附 Python)

一棵简单的二叉树如图。构建二叉树首先,构建如图的二叉树,并添加一个打印该树的方法 printTheTree。ES6 class 语法如下class TreeNode { constructor(value) { this.value = value this.left = null this.right = null } printTheTree()...

2018-11-13 22:42:31

ASCII码在算法题中的两个小妙用:转换字母大小写 与 转换整数字符String/Number类型(JavaScript/Python描述)

最少必要知识‘0’ 对应的ASCII码是 48‘A’ 对应的ASCII码是 65'a‘ 对应的ASCII码是 97这也是 JavaScript 中 'a' > 'A' 为 true 的原因。转换字母大小写假设做如下规定参数letter: 为单个英文字母字符;参数 mode :小写换大写为 1;大写换小写为 -1。JavaScript:const toUpperO...

2018-11-12 01:17:44

用 JavaScript 创建一个栈,并优化时间复杂度 (附 Python 描述)

题目描述:Design a stack that supports push, pop, top, and retrieving theminimum element in constant time.要实现的栈方法push(x) – Push element x onto stack.pop() – Removes the element on top of the stack....

2018-11-12 00:37:28

滚动条挤占内容宽度、破坏布局的解决方案

问题当内容增多,滚动条从无到有时,它的出现挤压了内容宽度,导致原来设计好的布局被破坏。原因滚动条的宽度是计算到内容content里的。解决思路增加一个中间层,使得外部容器宽度保持设计宽度,内部元素排列保持不变。具体案例使用antd的Modal弹窗,基于其最简单的基本示例,如图:希望的效果:弹窗定宽定高;一排4个,宽度、边距固定;当总...

2018-08-21 17:11:02

JavaScript 用一个一元函数精简地实现 ES6 的 findIndex 与 findLastIndex 方法

普通地实现findIndex与findLastIndexES6新增了findIndex与findLastIndex数组方法,可以正序、反序地查询,并返回数组中满足回调函数的第一个元素的索引,否则返回-1。//用法arrayObj.findIndex(callbackfn[,thisArg]);//回调函数用法functioncallbackfn(value...

2018-07-10 00:25:54

JavaScript 实现 对象、数组、类数组通用的遍历方法 each

jQuery 的 each 方法jQuery 有个 each 方法,是对于对象、数组通用的遍历方法。具体的用法参考官方文档:.each()今天我们也来实现这样一个 each 方法。思路参数:参考 jQuery ,each 方法接收两个参数:要遍历的对象;要在其上执行的回调函数。逻辑:自然是要先判断其类型,是数组(类数组)就执行 for 循环(forEac...

2018-07-08 22:41:46

grid 入门:用 grid 布局轻松解决 flex 布局不太好做的一个问题

最近一个需求如图:大概是数据上,react组件从父组件接收两个数组,分别渲染出左右两列;左右两列内容都是动态的,要求自适应文字高度,同一行其行高一致;左列文字右对齐,右列文字左对齐;伪代码:Array1.map(渲染左列表组件)Array2.map(渲染右列表组件)...

2018-06-30 17:05:54

二分搜索 / 折半查找

查找/搜索算法中,顺序搜索没什么好说的,从二分搜索 / 折半查找开始。步骤选择中间值 (low+high) / 2如果它是目标值,bingo~如果大了,从其左边的一半找如果小了,从其右边的一半找如果找不到,返回 -1 或 null 等注意: 需要数组本身有序递归实现function binaryhSearch(arr, low, high, target) ...

2018-05-06 13:14:55

几种常见的排序算法总结(JavaScript 描述)

本文讨论:冒泡排序、插入排序、希尔排序、简单搜索排序、快速排序、归并排序、堆排序。冒泡排序介绍冒泡排序比较任何两个相邻的项。如果前一个比后一个大,就交换它们。元素向上移动至正确的位置,看上去就像水中上升的气泡一样。代码function bubbleSort(arr) { let length = arr.length; let flag; ...

2018-05-06 00:49:02

JavaScript 实现 reduce() 方法函数

思路与之前两篇文章(map()的实现,filter()的实现)中的迭代方法不一样,reduce()是归并方法。reduce接收两个参数:第一个参数是在每一项上调用的函数该函数接收4个参数:前一个值prev当前值cur项的索引index数组对象array第二个可选参数是作为归并基础的初始值reduce方法返回一个最终的值。代码表示...

2018-05-03 20:40:01

JavaScript 实现 filter() 方法函数

思路filter方法接收两个参数:对每一项执行的函数该函数接收三个参数:数组项的值数组项的下标数组对象本身指定this的作用域对象filter方法返回执行结果为true的项组成的数组。代码表示:arr.filter(function(item,index,arr){},context)实现由此,实现fakeFilter...

2018-05-03 14:26:57

JavaScript 实现 map() 方法函数

思路map 迭代方法接收两个参数:对每一项执行的函数 该函数接收三个参数: 数组项的值数组项的下标数组对象本身指定 this 的作用域对象map 方法返回每次函数调用结果组成的数组。代码表示:arr.map(function(item, index, arr) {}, this);实现由此,实现 fakeMap 方法如下代码:Array...

2018-05-03 13:57:52

用 JavaScript 函数实现时间格式转换('46秒' => '00:00:46')

题目假设传入的参数就是“2时5分”、“3时46秒”这种格式的字符串,省去参数类型检测。 略去检测分秒数大于 60 的情况。思路:先把字符串 split 打散转换为数组forEach() 遍历数组元素找出“时”、“分”等关键词的 index据此切分拼接新格式数组注意点:arguments 和对应参数的绑定 非严格模式下,当传入实参,实参和 arguments ...

2018-05-03 02:13:56

Understanding Block Formatting Contexts in CSS

A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal flow. According to W3C:Fl

2018-04-30 21:07:32

JavaScript 实现继承的方式:原型链、组合式、寄生组合式

原型链继承let Parent = function() { this.name = [‘parent']}Parent.prototype.sayName = function() { console.log(this.name)}let Child = function(){}Child.prototype = new Parent() //原型式继承l...

2018-04-14 19:10:44

查看更多

勋章 我的勋章
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。