[前端-动态数据可视化]横向柱状图的动态数据可视化

一个基于D3.js的横向柱状图的动态数据可视化工具

前言

首先感谢原作者Jannchie https://github.com/Jannchie/
以及原项目Historical-ranking-data-visualization-based-on-d3.js

写这个东西是因为学校某项目的一个练手题目选定了这个
那我为啥要写前端呢？因为前端那位，我好像联系不到：）
没办法时间挺紧的，这小项目就我一人写了
几乎所有的代码都是来自原项目的，考虑到整个项目可能不断需要魔改动态可视化，于是就另开了一个新repo ColumnsAnimation
期待这个repo以后的变化吧

顺便写了这个随笔，本意是给自己前端看的，但今天有位同学问优化问题，所以就写的详细点了

模块组织

简单的html+js+css，其中html和css没什么要说的，简单提一下

  1. HTML部分
    主要引用js和css文件
    有一个地方需要注意一下，就是窗口宽度问题
<meta name="viewport" content="width=device-width">

  1. CSS部分
    设置颜色类：这个点子非常好，可以方便的修改颜色数据
    设置各种元素宽度，文字描边和坐标样式：这里有个问题，如果SVG变宽高，这里的各种元素宽度就会略有问题

  2. JavaScript部分
    动态可视化核心代码，主要就是标签的组织和更新
    首先讲清楚SVG内部标签构造，和动态更新的原理
    运行代码可以简化分析SVG内部标签的设置

SVG内部标签

g group标签包含其他所有svg标签
    g x轴（由d3生成）
        text x轴标签（d3生成）
        path x轴（d3生成）
        g*n n个时间竖线(英文是Tick不知道怎么翻译)
            line 竖线
            text x轴数字
    g 这个组不知道干嘛的，可能是y轴，以后考虑去掉？
    text 这个是timer，改源代码时忘记留下来了，最后自己加上的
    g*n n个bar，这是动态的主题
        g 这是标记颜色的，好像没用？
        rect 这是柱子，只有颜色类
        text y轴上的柱后文字，label类颜色类
        text 柱前数字，value类颜色类
        text 柱上文字，barInfo类

动态更新原理
就是不断的绑定新数据：
在Enter里初始化新数据
在upate里更新新元素
在exit下删除旧元素
关键在于d3提供了按索引绑定数据的方法，这样的操作才得以简单进行，详细说明在下面

细节问题

  1. 利用setInterval()来控制整个时间变化
    首先输入数据data，按时间push到date数组里
    再定义一个iter，同于控制总时间

  2. 获得颜色类
    作者使用了一个简单的hash函数，做了一个name到hash值的映射，然取模color.length()取得颜色类

\[Hash(name)=\sum name[i] \]

  1. 获取当前时间下的数据
    这里原作者是枚举data数组，返回对应时间下的数据（修改的代码中顺便维护了Timer）
    有一个同学也是写了这个项目，但总是有卡顿(win10)，那么我们顺便讲一下优化
    其实这里可以二分达到O(logn)，但首先需要预处理数据排序O(nlogn)，其次我们设置了MaxNumber用来控制显示柱子的数量，就是说这里还能优化
    最好的方法是在后端处理好数据(排序+切片)后传给前端，这种一劳永逸的方式何乐而不为

  2. 刷新图表
    这里是核心部分，我们拆开来看
    注意作者将interval间隔时间分成了三份( interval/=3 )

  • 首先维护yScale, xScale, xAxisG, yAxisG和Timer
    原作者在初始化刻度尺时并没有给出domain, range这是很让人舒服的地方，非常优雅
    设置坐标系的更新动画，注意还要添加.call(xAxis)，顺便删除原有tick
    维护Timer，这里有两个要点。其一、在第一次显示Timer时停顿。其二、数字的过度动画d3中没有直接的实现，只能是用tween调d3.interpolate自己写

  • 绑定bar的数据
    注意.data(data, [key])中的key是每个元素的键值，对应原有元素的键值进行更新。如果没有设置的话就从头到尾覆盖

  • Enter元素的过渡动画
    在绑定了数据后，按道理所有元素的数据都是当前时间下最新数据。
    Enter部分指新加入数据，这里应该是带有新键值的数据。
    这里的更新就像是初始化。
    注意设置以下属性：
    transform, x, y, width, height, fill-opacity, class（带有颜色类）, text, stroke-width

  • Update元素的过渡动画
    Update元素就是数据被更新的元素，这里的过渡动画的属性就很少，因为一些属性不需要变化（比如颜色类）

  • Exit元素的过渡动画
    Exit元素就是上一次时间的数据，在当前时间的数据中没有出现的元素。
    这里的过渡动画就更简单了，过渡里直接remove()，设置fill-opacity为0即可

  • 更新y坐标
    最后我们更新每个bar元素的y坐标即可，这里使用了一开始设置的yScale

效果图

posted on 2018-07-29 18:26  糖栗子  阅读(9455)  评论(3)  编辑  收藏  举报

导航