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

一个基于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内部标签的设置

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和exit，这里没有想明白d3是如何判重的，这个问题有待更新

细节问题

待更新，先吃饭