二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > 如何采用python和D3.js展示多級技術分支【實戰作圖詳解】

如何采用python和D3.js展示多級技術分支【實戰作圖詳解】

時間:2018-08-10 11:47 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

圓堆積圖(Circle Packing)也稱為“圓形樹結構圖”,是樹形結構圖的變體,使用圓形一層又一層地代表整個層次結構。每個圓形的面積可用來表示數值的大小。還可用顏色將數據進行分類。
 
在專利分析中,圓堆積圖可以用于表示某一領域的技術構成,圓圈的嵌套層級可以展示多級技術分支之間的包含關系,圓圈的大小體現了該分支內的專利量的多少。
 
今天,梁先國網絡科技小編嘗試采用python和D3.js制圓堆積圖來展示多級技術分支的可視化。
 
為了使用D3繪圖,首先用文本編輯器建立一個網頁文件:復制下面的程序至Sublime Text(不想裝Sublime Text的小伙伴用windows的記事本等編輯器也可以)另存為.html文件,在網頁文件中引用D3繪圖庫繪制,點擊瀏覽器打開即可看到圖表或者debug程序。
 
建立網頁的過程涉及到專業的前端設計知識,為了減少工作量,我們直接修改模板即可。本篇教程的網頁代碼如下:
 
<!DOCTYPE html>
 
<meta charset="utf-8">
 
<style>
 
circle {
 
  fill: rgb(31, 119, 180);
 
  fill-opacity: .25;
 
  stroke: rgb(31, 119, 180);
 
  stroke-width: 1px;
 
 
.leaf circle {
 
  fill: #ff7f0e;
 
  fill-opacity: 1;
 
 
text {
 
  font: 10px sans-serif;
 
  text-anchor: middle;
 
}
 
</style>
 
<svg width="960" height="960"></svg>
 
<script src="https://d3js.org/d3.v4.min.js"></script>
 
<script> 
 
var svg = d3.select("svg"),
 
   diameter = +svg.attr("width"),
 
    g = svg.append("g").attr("transform", "translate(2,2)"),
 
   format = d3.format(",d"); 
 
var pack = d3.pack()
 
   .size([diameter - 4, diameter - 4]);
 
d3.json("flare.json", function(error, root) {
 
  if (error) throw error; 
 
  root = d3.hierarchy(root)
 
     .sum(function(d) { return d.size; })
 
     .sort(function(a, b) { return b.value - a.value; });
 
  var node = g.selectAll(".node")
 
   .data(pack(root).descendants())
 
   .enter().append("g")
 
     .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
  node.append("title")
 
     .text(function(d) { return d.data.name + "\n" + format(d.value); });
 
  node.append("circle")
 
     .attr("r", function(d) { return d.r; }); 
 
  node.filter(function(d) { return !d.children; }).append("text")
 
     .attr("dy", "0.3em")
 
     .text(function(d) { return d.data.name.substring(0, d.r / 3); });
 
});
 
</script>
 
 
對上述開源模版做如下修改,即可得到我們的多級技術分支的Circle Packing圖啦:
 
 

多級技術分支的Circle Packing圖
1. 顏色及字體修改
 
枝干(外層圓)顏色,通過下述語句中的fill字段修改RGB值,可接受RGB或24位16進制顏色值:
 
circle {
 
  fill: rgb(31, 119, 180);
 
  fill-opacity: .25;
 
  stroke: rgb(31, 119, 180);
 
  stroke-width: 1px;
 
}
 
葉子(內層圓)的顏色,通過下述語句中的fill字段修改即可:
 
.leaf circle {
 
  fill: #ff7f0e;
 
  fill-opacity: 1;
 
}
 
標簽的字體及大小,通過下述語句中的font字段進行修改:
 
text {
 
  font: 10px sans-serif;
 
  text-anchor: middle;
 
}
 
 
 
2. 輸入數據格式轉換
 
D3是基于javascript語言編寫的,數據是以json格式喂給D3的,因此我們需要將在技術分解時一般常用的Excel格式的數據轉換為json格式。 
 
用于繪制circle packing的json數據是一種樹狀結構,即由一個主干,向上發散出多個枝干,枝干向上再發散出多個葉子。用于數據輸入的Excel文件如下圖所示,也是一種樹狀結構。需要注意的是,當某個枝干沒有下一級枝干或者葉子時,需要我們填入“無”以供程序區分,例如表中的“裝置”分類。
 
我們使用一段python程序來將這個excel表格轉換為json文件(也可以通過Excel的一個收費小插件‘Excel to JSON’轉換為json文件),待讀入數據可以是如下圖所示的Excel文件:
 
 
Excel轉為json格式的python程序如下所示:
 
import pandas as pd 
 
xl = pd.ExcelFile('數據.xlsx')
 
df=xl.parse('工作表1')
 
df1=df.fillna(method='pad')
 
node={"name":"","children":[]}
 
leaf={"name":"","size":0}
 
result=[]
 
name_list=[] 
 
for i in df1.index:
 
   if df1.iloc[i][0] not in name_list:
 
        name_list.append(df1.iloc[i][0])
 
        node={"name":df1.iloc[i][0],"children":[]}
 
        result.append(node)
 
   else:
 
        pass 
 
name_list2=[]
 
for i in df1.index:
 
   name1=df1.iloc[i][0]
 
   name2=df1.iloc[i][1]
 
   if name2 not in name_list2:
 
        name_list2.append(name2)
 
        node={"name":name2,"children":[]}
 
        for i in result:
 
            if i['name']==name1:
 
                i["children"].append(node)
 
            else:
 
                pass
 
   else:
 
        pass 
 
name_list3=[]
 
for i in df1.index:
 
   name1=df1.iloc[i][0]
 
   name2=df1.iloc[i][1]
 
   name3=df1.iloc[i][2]
 
   if name3 not in name_list3:
 
        if name3=='無':
 
            name3=name2
 
        name_list3.append(name3)
 
        node={"name":name3,"children":[]}
 
        for i in result:
 
            if i['name']==name1:
 
                for j in i["children"]:
 
                    if j["name"]==name2:
 
                        j["children"].append(node)
 
            else:
 
                pass
 
   elif name3=='無':
 
        name3=name2
 
        node={"name":name3,"children":[]}
 
        for i in result:
 
            if i['name']==name1:
 
                for j in i["children"]:
 
                    if j["name"]==name2:
 
                        j["children"].append(node)
 
            else:
 
                pass
 
   else:
 
        pass
 
name_list4=[]
 
for i in df1.index:
 
   name1=df1.iloc[i][0]
 
   name2=df1.iloc[i][1]
 
   name3=df1.iloc[i][2]
 
   name4=df1.iloc[i][3]
 
   if name4 not in name_list4:
 
        if name4=='無':
 
            if name3=='無':
 
                name4=name2
 
                name3=name2
 
            else:
 
                name4=name3
 
        name_list4.append(name4)
 
        leaf={"name":name4,"size":df1.iloc[i][4]}
 
        print(leaf)
 
        print('name:',(name1,name2,name3,name4))
 
        for i in result:
 
            if i['name']==name1:
 
                for j in i["children"]:
 
                    if j["name"]==name2:
 
                        for k in j['children']:
 
                            if k['name']==name3:
 
                                k["children"].append(leaf)
 
                                print('add:',leaf)
 
            else:
 
                pass
 
   elif name4=='無':
 
        if name3=='無':
 
            name4=name2
 
            name3=name2
 
        else:
 
            name4=name3
 
        leaf={"name":name4,"size":df1.iloc[i][4]}
 
        print('else:',leaf)
 
        print('name:',(name1,name2,name3,name4))
 
        for i in result:
 
            if i['name']==name1:
 
                for j in i["children"]:
 
                    if j["name"]==name2:
 
                        for k in j['children']:
 
                            if k['name']==name3:
 
                                k["children"].append(leaf)
 
            else:
 
                pass
 
   else:
 
        pass 
 
out=str(result[0])
 
out=out.replace("'","\"")
 
with open('flare.json', 'w') as fout:
 
   fout.write(out)
 
 
適應性的修改上述程序中讀入的excel及其sheet的名稱,執行程序,于是在python程序所在目錄下生成flare.json文件。將該文件和網頁模板文件放在同一目錄下,雙擊該網頁文件打開圓堆積圖:
 
 
生成flare.json文件,打開圓堆積圖
 
寫給使用IE、Chrome和360瀏覽器的小伙伴們:
 
默認情況下IE、Chrome和360瀏覽器可能無法正常顯示這個圖表(經測試,火狐瀏覽器是可以直接打開正常顯示的,其他瀏覽器小編并沒有裝),這是因為瀏覽器的安全限制問題。為了讓用IE和Chrome瀏覽器的小伙伴正常打開D3繪制的圖表,我們需要進行一些額外的操作。
 
首先,打開Anaconda prompt(打開方式參見:作圖詳解|Anaconda擴展包的安裝及bug處理),切換到存放D3網頁和json數據的文件夾下。例如小編的文件夾在“C:\Users\lamapig\Desktop\D3”下,而Anaconda prompt打開后默認的目錄是“C:\Users\lamapig\Documents”,我們怎么進到D3的文件夾呢?輸入命令“cd C:\Users\lamapig\Desktop\D3”就可以啦!然后,使用“dir”命令查看一下文件夾內的文件,確認進入了正確的路徑:
 
使用“dir”命令查看一下文件夾內的文件
 
確認一切正常后,在這一路徑下,繼續輸入命令“python -m http.server 8989”來啟動一個簡易的web服務器。
 
啟動后,可以在任意一個瀏覽器的地址欄里輸入http://localhost:8990/來進入網頁查看目錄下的文件,單擊下圖目錄中的circle_packing.html就可以得到我們剛剛畫的圖啦。


瀏覽器的地址欄里輸入http://localhost:8990/




 
 
 

版權聲明:本文:如何采用python和D3.js展示多級技術分支【實戰作圖詳解】 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 重庆彩票店销售时时彩么 广东11选五网上投注平台 彩票店倒闭 新平台电子送免费彩金不限id 急速赛车单机游戏 多彩网官网下载 网上黑彩票平台有哪些 天津时时后三走势 梅西联赛总进球数至今 玩极速时时是骗局吗 2018版六台宝典资料 三分时时彩开奖