数据可视化 | 青训营笔记

用户2147483647
115 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第12天。

今天我们聊一下关于数据可视化的一些问题，介绍了何菲菲老师上课讲到的几个比较流行的面向前端可视化工具。

如果有兴趣，可以看看我之前的文章：红包算法之如何助你抢到大红包 | 青训营笔记 - 掘金 (juejin.cn)。

D3.js

D3js 是什么

近年来，数据可视化越来越流行，许多拥有大量数据的大型网站都开始使用可视化技术，使得大量杂乱的数据规则起来，易于理解，真可谓“一图胜千言”，毫不夸张，而D3，Echarts正是其中的佼佼者。

D3 的全称是（Data-DrivenDocuments），是一个被数据驱动的文档。其实是对数据进行可视化的JavaScript库。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，能最大限度地使用现代浏览器的性能同时为设计可视化界面保留了最大的自由度。 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG以及 Canvas 来展示数据。

  • D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。

  • D3 可以将数据绑定到 DOM 上，然后根据数据来计算对应 DOM 的属性值。例如你可以根据一组数据生成一个表格。或者也可以生成一个可以过渡和交互的 SVG 图形。

  • D3 不是一个框架，因此也没有操作上的限制。没有框架的限制带来的好处就是你可以完全按照自己的意愿来表达数据，而不是受限于条条框框，非常灵活。D3 的运行速度很快，支持大数据集和动态交互以及动画。

如何使用D3js

前置基础

想要使用D3.js做数据可视化你需要了解一些前置知识，如SVG
首先你需要熟悉它的常用标签及属性：

<!-- 常用标签 -->
<svg></svg>
<g></g>
<circle>
<path>
<line>
<rect>
<text>
...

d3开发树图流程

  1. 根据需求确定图表类型(例如树图)
  2. 数据预处理（把输入的原始数据转化成为标准的D3可接受的数据格式一般图像是对象数组）
  3. 根据处理好的数据结合布局API作图（例如树图 ：d3.hierarchy()和d3.tree()的结合使用）
  4. 再调整文本位置，间隔等细节的东西，从而让图形布局更合理
  5. 给已经完成的图形添加动画效果和事件交互

怎么实现？

普通tide tree

第一步：在页面中初始化设置 svg

// 1、 选中页面给页面添加svg标签；设置Svg绘制区域的宽和高；添加g元素(svg的group分组标签元素)并设置位置。
      // Set the dimensions and margins of the diagram
      let margin = { top: 470, right: 90, bottom: 30, left: 90 };
      let width = 1960 - margin.left - margin.right;
      let height = 1200 - margin.top - margin.bottom;
      let svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

第二步：数据预处理

 // 2、生成树状布局，设置树图布局容器尺寸。
      let tree = d3.tree().nodeSize([30, 170]);

      let root = d3.hierarchy(this.treeData); // 第一次数据预处理，给每个节点添加了 height depth parent 属性

      this.tree(root); // 第二层数据预处理 确定每个节点在图上的位置，每个节点多了x,y属性

第三步：生成节点和链接（...)

第四步：给已经完成的图形添加动画效果和事件交互，例如这里给每个节点添加点击事件和mouseover事件

 // 4.3生成节点。
      let node = svg
        .selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function (d) {
          return "translate(" + d.y + "," + d.x + ")";
        })
        .on("click", (d) => {
          console.log(`----------click------------`);
        })
        .on("mouseover", () => {
          console.log(`----------hover------------`);
        });

radio tide tree

radio tide tree又是如何实现的呢？
一番摸索后，我发现这两种树图实现的差别在于：

  • d3.tree()传入参数不同
  • link对角线生成器不同
  • 节点transform设置不同
差别tide treeradio tide tree
d3.tree()传入参数不同[width,height][radian，radius]
link对角线生成器不同linkHorizontal()或者linkRadial()
节点transform设置不同x,y坐标极坐标

ECharts

ECharts 是什么

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。

如何使用

引入ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body><br>

 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

对比

D3.js 对比 Echarts

EChartsD3
Canvas为主4.0+也支持SVGSVG为主4.0+也支持Canvas
提供很多图表通过简单配置可以满足大部分需求不能通过简单配置实现大部分图表
基本不可定制自由度很大，基本可以自己绘制任何图表
开发效率高，通过快速配置即可完成大部分图表需要开发
提供基于WebGl的GL版实现3D图表借助其他库来实现例如：three.js、glMatrix、Sylvester

总结：

ECharts等提供的图表的确可以满足大部分的需求，遵循了数据可视化的一些经典范式，一切皆可配置。ECharts这类图形库基本不可定制，而D3自由度度很大，基本可以自己绘制任何想要的图形，这类情况的需求可以使用D3进行二次开发，定制适合的图表，但是开发成本会稍高。

如有不对之处，欢迎指出

avatar
文章
阅读
粉丝