乐趣区

关于javascript:数据可视化之D3JS-不完全使用指南

jiezi

背景

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

上文介绍了纹理相干的内容, 并应用 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!

本篇纲要

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

学习库(调研库)

从几个方面进行调研考查

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

按上述步骤看看 D3 怎么说

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

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

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

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

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

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

存在几种状况

  1. 有现成的例子且齐全满足开发需要
  2. 无现成的例子然而能够通过几个例子混合应用达到成果
  3. 本人入手利用 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 的仓库, 浏览源码你会发现这个状况

  1. d3-array 数组
  2. d3-axis 坐标轴
  3. d3-brush
  4. d3-color 色彩
  5. …

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

友情链接

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

最初

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

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

退出移动版