240 发简信
IP属地:北京
  • setTimeout、setInterval、requestAnimationFrame

    在异步编程中当然少不了定时器了,常见的定时器函数有setTimeout、setInterval、requestAnimationFrame。 setTimeout 刚开始用s...

  • JS_['1','2','3'].map(parseInt)

    第一眼看到这个题目时,脑海里的答案是[1,2,3],但是真正的答案是[1,NaN,NaN] 通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被...

  • JS_尾递归

    函数调用自身,称为递归。当递归调用是整个函数体中最后执行的语句且它的返回值不属于表达式的一部分时,这个递归调用就是尾递归。 递归非常耗费内存,因为需要同时保存成千上百个调用帧...

  • JS_精准地判断数据类型

    判断数据类型的三种方式 1. typeof typeof对于原始类型来说,除了null都可以显示正确的类型;对于对象来说,除了函数,其他都会显示object,所以typeof...

  • 120
    12-D3.js地图

    一、JSON与GeoJSON GeoJSON 是基于 JSON 的、 为 Web 应用而编码地理数据的一个标准。实际上,GeoJSON 并不是另一种格式, 而只是 JSON ...

  • 120
    11-D3.js力导向图

    力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。 各连线的长度几乎相等,且尽可能不相交。节点和...

  • 120
    10-D3.js饼图

    一、饼状图 dataset = [5, 10, 20, 45, 6, 25];这样的值是不能直接绘图的。例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都...

  • 09-D3.js动态增删数据

    目前为止,只要更新数据,我们采用的都是“整批整包”的方式:改变数据集数组中的值,然后重新绑定修改后的值,覆盖原始值对 DOM 元素的绑定。 这种方式非常适合所有值都会改变,而...

  • 120
    08-D3.js散点图

    随机数+坐标轴+散点图 更新散点图,支持数据更新和动态比 单击上方的文本可以生成新数据并更新图表更新数据后,使用了动画过渡更新x和y轴的比例尺 加载动画在过渡开始和结束时执行...

  • 120
    07-D3.js交互和布局

    一、交互操作 对某一元素添加交互操作十分简单: 在D3 中,每一个选择集都有 on() 函数,用于添加事件监听器。 鼠标常用的事件有: click:鼠标单击某元素时,相当于 ...

  • 06-D3.js过渡动画

    D3提供了4个方法用于实现图形的过渡 transition 图形变化前后的状态(形状、位置、颜色等) duration() 指定动画过渡的时间(ms) ease() 指定过渡...

  • 120
    05-D3.js完整的柱状图(比例尺+坐标轴)

    一个完整的柱形图包含三部分:矩形、文字、坐标轴。这里对前几章的内容进行综合的运用,制作一个实用的柱形图,内容包括:选择集、数据绑定、比例尺、坐标轴等内容。 案例-完整的柱形图

  • API这里没贴运行效果的截图,可以本地运行试试,在浏览器里看一下svg的标签变化;建议d3引用4.0之后的版本

    01-D3.js常用API

    数据可视化对比 echarts 百度开源项目,学习门槛较低,国内应用领域十分广泛,apache孵化器,主要是修改配置options 缺点:定制性较差,代码复用率低,因为此类库...

  • 120
    04-D3.js坐标轴

    坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成。D3 提供了坐标轴的组件,如此在 SV...

  • 03-D3.js比例尺

    之前绘图时,我们直接将数组中的值作为矩形元素的宽/高度,这种方式非常有局限性,如果数值大小比较极端,例如: 对以上两个数组,绝不可能用 2.5 、0.9个像素来代表矩形的宽度...

  • 120
    02-D3.js基础案例

    基础柱状图 要绘图,首要需要的是一块绘图的“画布”。 为简单起见,我们直接用数值的大小来表示矩形的像素宽度(后面会说到这不是一种好方法)。然后,添加以下代码。 将图表标签更换...

  • 120
    01-D3.js常用API

    数据可视化对比 echarts 百度开源项目,学习门槛较低,国内应用领域十分广泛,apache孵化器,主要是修改配置options 缺点:定制性较差,代码复用率低,因为此类库...

  • 120
    02-WebGL缓冲区对象

    WebGL提供了一种很方便的机制,即缓冲区对象(buffer object),它可以一次性地向着色器传入多个顶点的数据。 缓冲区对象是WebGL系统中的一块内存区域,我们可以...

  • 120
    01-WebGL着色器

    要使用WebGL进行绘图就必须使用着色器。在代码中,着色器程序是以字符串的形式“嵌入”在JavaScript文件中的,在程序真正开始运行前就已经设置好了。 WebGL需要两种...

个人介绍
习练,一切都会随之而来!