背景

本篇收录于《数据可视化和图形学》专栏

上文介绍了纹理相干的内容,并应用WebGL进行了3d的实现,emm.....
本篇文章呢算是一个新方向,也算摸索写作的一个思路。(应着群内小伙伴的需要来讲讲框架的日常应用) 当然理论知识必定是依旧会交叉进来。

写作形式会从学习(调研),应用,深刻进行混讲。其实就是我日常应用某一个(框架)库的根底流程分享进去心愿帮忙到大家。

在开始前简略介绍下明天的配角D3JS(上面简称D3)

D3全称 Data-Driven Documents 3个D结尾的单词也是它D3简写的由来(不要有的人用了半天不晓得这名字怎么来的不要当假粉哼~)
D3的劣势 :
1. 明星级别库毋庸置疑 github的star 将近98k。那么可想而知用户社区必然是齐备的。
2. D3是灵便的各模块可拆分可组合。
3. 渲染方面设计优良,关注的是shape,scale根底图元。不是特定图表的配置化。这样灵活性更高
4. animation(动画),interaction(交互)成果很优良。
5. 反对多种渲染模式,svg,canvas 很多...
图表品种,图表示例很全很全,所以日常开发可能都不须要根底模块的组合示例教程在Observable。

明天对于如何学习D3,应用D3,深刻D3做一次通俗的探讨。 follow me!

本篇纲要

学习库阶段(调研阶段)
应用库阶段(日常开发阶段)
深刻库阶段(学习框架,或者新需要在框架源码上进行定制化。)

学习库(调研库)

从几个方面进行调研考查

首先看库是否满足业务开发和业务拓展
看下该库更新的一个频率,稳定性问题。( 当然有实力团队也能够clone一份以后应用版本,不便后续的保护。)
该库社区是否沉闷不便后续问题探讨跟进 (如果team有足够示例能够不care这点)
~~对于是否与现有主框架(次要技术栈)兼容问题,这个如果一个库满足以上几点。应该问题不大(也能够列入考查中)~~

按上述步骤看看`D3`怎么说

1.首先看库是否满足业务开发和业务拓展

D3反对SVG(HTML)/Canvas的渲染模式,简略来说一些适宜的形象业务场景

日常图表开发品种丰盛,有关系类,统计类,简略地图类...
数据量大然而属于动态类剖析(只加载一次)可抉择SVG渲染
数据量大而且属于高频交互能够抉择Canvas渲染(如果数据量海量。从交互,渲染等方面优化甚至须要换渲染形式)
图表渲染前,中,后须要酷炫的动画成果。
...

第2,3点问题呢贴几个图吧
commit的一个状况和issues反馈状况

从成员以及提交曲线来看(截图不全能够去github查看还有这个是近一年的,可能不太准 bug太少了哈哈)

应用库阶段(日常开发阶段)

存在几种状况

有现成的例子且齐全满足开发需要
无现成的例子然而能够通过几个例子混合应用达到成果
本人入手利用API应用并深入研究,在库不满足需要状况下进行定制化开发。

首先很多人都处于第1种和第2种状况始终彷徨.这个起因说直白点还是代码搬运工的程度. 当然这个更多属于深刻模块只有晓得它是什么能力施展更大的劣势。这方面的分享可能目前来说较少

拿一个图表来做示例。

实现上图只须要上面几个步骤

须要限度画布的一些属性,宽高
须要绘制2个刻度尺, 通过数据计算min,max
须要绘制柱状图形 ,数据绑定

须要限度画布的一些属性,宽高

var  width = 1000;var  height = 500;var  margin = ({    top:20,    right:0,    bottom:30,    left:40})const  svg = d3.select("body").append("svg");

须要绘制2个刻度尺。

var x = d3.scaleBand()    .domain(data.map(d=>d.name))    .range([margin.left,width-margin.right])    .padding(0.2)var y = d3.scaleLinear()    .domain([0,d3.max(data,d=>d.value)]).nice()    .range([height - margin.bottom,margin.top])            svg.append("g")    .attr("class","x-axis")    .attr("transform",`translate(0,${height- margin.bottom})`)    .call(d3.axisBottom(x).tickSizeOuter(0))    // 设置x轴刻度svg.append("g")    .attr("class","y-axis")    .attr("transform",`translate(${margin.left},0)`)    .call(d3.axisLeft(y))  //y轴坐标刻度

须要绘制柱状图形

svg.append("g")    .attr("class","bars")    .attr("fill","skyblue")    .selectAll("rect")    .data(data)    .join("rect")    .attr("x",d=>x(d.name))    .attr("y",d=>y(d.value))    .attr("width",x.bandwidth())    .attr("height",d=>y(0) - y(d.value))

下面这个简略的例子能够反映进去你应用D3的根本流程首先你要明确你的画布是如何限度的。而后呢你要想你画什么。其次就是把数据对应的加上去。
当然很重要的一点要学习它的语法转变你编码的思维。非结构化的编程过程。

深刻库阶段(学习框架,或者新需要在框架源码上进行定制化。)

首先先不思考进行定制化开发,本篇首先去理解下它外部的实现。

关上D3的仓库,浏览源码你会发现这个状况

d3-array 数组
d3-axis 坐标轴
d3-brush
d3-color 色彩
...

其实这个跟它的设计是有关系的。是把能拆的局部尽可能的拆出来,这样的劣势在于你如果想与目前应用的库进行一些整合,非常简单。这也是D3火的起因。本篇不打算拆开具体模块进行开展。根本我目前用到的可能 drag(拖拽计算), quadtree(四叉树) 还有一些layout算法... 其实也并不是很多。有趣味能够留言专门拿出几篇来写这个《探讨如何在底层进行定制化》。

友情链接

D3仓库地址
mdn文档
示例代码仓库

最初

对于图形学/数据可视化,怎么学习的方向问题呢,我也属于摸索。或者等我写完这个系列可能更好的解答大家。

请大家多提提意见,不吝赐教斧正。有任何心愿分享的中央只有我理解或者我能够学来分享。 (当然学不会必定不会丢人现眼的呢哈哈)

背景