Jannchie基于d3.js做的一個将曆史資料排名轉化為動态柱狀圖圖表的資料可視化項目。
源碼下載下傳位址：1. https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js
注：下載下傳點選進入界面右下角的"Clone or download"按鈕即可
說明：因為項目持續更新，目前最新的項目和博文裡面界面展示已經有比較大的差異，是以下面放兩個曆史版本的連結：
1.百度網盤：https://pan.baidu.com/s/1VIWifPTBD3TSDS6R-jw9kQ 密碼：w4gp
2.gitHub曆史版本：https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js/tree/b1d4ba9749c32e6a5debd171fa2c5c49b8000d6d
說明：針對最近問的很多關于右上角計數的問題，已經測試了，具體修改内容在文章最後，見圖2-1.
另外，由于項目作者不斷在更新自己的項目，而我隻是閑暇時間來更新，可能跟不上作者的更新速度，是以難免有錯誤的地方，請大家見諒！！
效果展示:
圖（1-1）
首先： 解壓下載下傳的壓縮包，我們可以首先打開README.md(可以用notepad++、Editplus、Sublime 等文本編輯器打開)看一下 項目簡介：
圖（1-2）
從上圖我們可以了解到 一些關于此項目的基本資訊：這是基于D3.js(https://d3js.org/，基于javascript的一個實作資料可視化的函數庫)開發的一個将曆史資料排名轉化為動态柱狀圖的圖表。
資料格式: 壓縮包給我們提供了一個樣例資料，路徑為：/Historical-ranking-data-visualization-based-on-d3.js-master/dist/example.csv(csv用excel就可以編輯)。
強調：資料格式必須以下圖格式，四列name+type+value+date！！！
圖（1-3）
我們在操作時把自己的資料填充進去就可以。
然後我們測試一下效果：用浏覽器(建議用谷歌)打開bargraph.html，路徑為/Historical-ranking-data-visualization-based-on-d3.js-master/dist/bargraph.html，點選擇檔案，選擇修改過後的example.csv，可以看到基本效果如下：
圖（1-4）
我們發現顔色有點單調，因為預設的話顔色是随機的，那我們如何自定義顔色呢？
我們要先打開/Historical-ranking-data-visualization-based-on-d3.js-master/dist/config.js，把use_custom_color：false屬性的false改為true，即use_custom_color：true。 此屬性确定是否使用自定義顔色。預設為false。
圖（1-5）
其次在修改color.css樣式檔案之前，我們首先要考慮一下我們的顔色根據什麼區分，在config.js裡面有兩個屬性，
use_type_info : true， divide_by_type: true,這兩個控制以type進行顔色分類，這個type也就是我們example.csv裡面的type，舉個例子 { name : 馬龍， type ： 中國}，{ name : 張怡甯， type ： 中國}，想讓馬龍和張怡甯大魔王都顯示中國紅，那麼在color.css裡寫樣式
.中國 {
fill： red
}
.馬龍 {
fill： blue
}
.張怡甯 {
fill: gray
}
圖（1-6）
這時候隻有第一個樣式中國 fill:red(type) 生效，因為此時是以type分類
圖（1-7）
另外，我們除了以type為顔色分組之外，還可以以name分組，比如給張怡甯大魔王來個粉紅色，龍隊來個綠色，我們需要修改config.js裡面的 divide_by_type: false，false代表不以type分組，預設以name分組。
.馬龍 {
fill: green
}
.張怡甯 {
fill: pink
}
圖（1-8）
圖（1-9）
其次就是根據喜好在color.css設定你自己喜歡的顔色了，顔色有三種格式 ：①英文顔色，比如blue，yellow ②rgb(x,x,x) ③#xxxxxx(十六進制顔色) 可參考:http://www.runoob.com/cssref/css-colorsfull.html
再說一下其他的屬性config.js：
max_number : 每個時間節點最多顯示的條目數（同一時間點頁面顯示的最多條數）
itemLabel : "左邊資訊",頂部左邊顯示的提示資訊
typeLabel : "右邊資訊",頂部右邊顯示的提示資訊
use_counter： 計數器會出現在右上角，記錄着目前榜首的持續時間，這個加了之後會報錯Uncaught TypeError: Cannot read property 'data' of undefined，源碼裡it.data(j).text(function(){})報data的錯，大家斟酌使用。
left_margin : 230, // 圖表左間距。
right_margin : 150, //圖表右間距
top_margin : 200, //圖表上間距
bottom_margin : 0, //圖表下間距
首先看看右上角計數的效果：
圖(2-1)
右上角計數需要修改如下：
第一：用編輯器打開config.js檔案，開啟計數功能，即把cuse_counter屬性設定由false設定為為true，具體如下：
// 使用計數器
// 注意！使用計時器和使用類型目前不能相容，即不能同時開啟！
// 計數器會出現在右上角，記錄着目前榜首的持續時間。
use_counter: true,
第二：根據自己的需求更改右上角的文字說明：比如我這裡更改右上角文字說明為"榜首持續時間(天)",具體在config.js中修改如下：
// 附加資訊内容。
itemLabel: "左側文字",
typeLabel: "榜首持續時間(天)",
第三，更改step屬性，我目前的版本step預設屬性值為"7"，即為7天計數器記為“1”，意思就是如果榜首累計占據了7天，那麼我右上角顯示“1”，如果榜首累計占據了14天，那麼右上角顯示“2”，我自己展示的把step屬性改為了“1”，意思就是占據榜首1天，右上角計數器+1，是以上圖顯示為3；
// 每個時間節點對于計數器的步長。
// 比如時間節點日期的間隔可能為1周（七天），那麼step的值就應該為7。
step: 1,
第四：根據自己的實際需要調節右上角的文字說明和計數器的位置偏移，防止文字重疊，參數如下：
// 右側文字橫坐标，即為右上角文字說明的部分
text_x: 1000,
// 偏移量，即為右上角計數器相對文字說明的位置
offset: 500,