翻譯|使用教程|編輯:楊鵬連|2020-07-27 11:48:39.770|閱讀 409 次
概述:在本教程,我們不專(zhuān)注于以通常使用的相同精度來(lái)表示對(duì)象。取而代之的是,我們?cè)噲D發(fā)現(xiàn)網(wǎng)絡(luò)或網(wǎng)絡(luò)中各個(gè)部分的關(guān)系,而不必?fù)?dān)心單個(gè)節(jié)點(diǎn)。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤(pán)、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
現(xiàn)在,我將指導(dǎo)您 如何使用JavaScript(HTML5)為Web開(kāi)發(fā)交互式網(wǎng)絡(luò)圖。受 本·沙林斯(Ben Sullins)創(chuàng)建的有趣的可視化效果的啟發(fā) ,我決定采用有關(guān)過(guò)去十年最大的電視連續(xù)劇《權(quán)力的游戲》的數(shù)據(jù)。這是一個(gè)史詩(shī)般的幻想故事,圍繞著各種派系式房屋的爭(zhēng)吵。因此,在本教程中,我將通過(guò)展示誰(shuí)攻擊了誰(shuí)來(lái)形象化《權(quán)力的游戲》世界中的關(guān)系。跟著我,這將是一次很酷的冒險(xiǎn)!
制作網(wǎng)絡(luò)圖
基本上,要構(gòu)建基于JS的網(wǎng)絡(luò)圖,我們需要遵循與任何JavaScript圖表相同的四個(gè)步驟:
建立網(wǎng)絡(luò)圖的第一步是設(shè)置HTML頁(yè)面。這涉及為圖表創(chuàng)建基本的HTML模板以及添加必要的CSS規(guī)則。
在這里,我們還為HTML頁(yè)面添加標(biāo)題,并創(chuàng)建一個(gè)div來(lái)包含圖表。
<!DOCTYPE html> <html> <head> <title>JavaScript Network Graph</title> <style> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> // The chart code goes here. </script> </body> </html>我設(shè)置了CSS,以使容器div填充整個(gè)頁(yè)面。當(dāng)然,您可能要根據(jù)用例進(jìn)行更改。
2.添加必要的腳本
第二步是添加所有必需的腳本。我們將使用AnyChart JS Charts ,它是一個(gè)非常易于使用且功能強(qiáng)大的JavaScript圖表庫(kù)。我個(gè)人喜歡AnyChart,因?yàn)樗鼘?duì)初學(xué)者和專(zhuān)業(yè)人士都非常有用。它使您可以快速建立數(shù)據(jù)可視化的原型,并確實(shí)有助于加快整個(gè)開(kāi)發(fā)過(guò)程。
為了充分利用AnyChart庫(kù),我們需要添加其專(zhuān)用模塊。在本教程中,我們將使用其中的三個(gè)。需要Core和Graph模塊來(lái)繪制我們的網(wǎng)絡(luò)圖,而Data Adapter模塊將幫助我們導(dǎo)入《權(quán)力的游戲》 JSON數(shù)據(jù)(稍后會(huì)介紹更多)。
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
我們將這些腳本添加到代碼的開(kāi)頭。
3.加載我們將要可視化的數(shù)據(jù)
如前所述,我們將使用的數(shù)據(jù)基于《權(quán)力的游戲》。我找到了一個(gè)很棒的數(shù)據(jù)集,《五王之戰(zhàn)》。數(shù)據(jù)最初是從源火維基和冰,致力于權(quán)力的游戲維基。然后,數(shù)據(jù)科學(xué)家Wikimedia Foundation的機(jī)器學(xué)習(xí)總監(jiān)Chris Albon對(duì)其進(jìn)行了刮擦和清理。為了這個(gè)JS網(wǎng)絡(luò)圖教程的目的,我自己進(jìn)一步處理了它。你可以找到的結(jié)果 在這里,在JSON。
問(wèn)題是,AnyChart希望您的網(wǎng)絡(luò)圖形數(shù)據(jù)采用特定格式。它想要一個(gè)具有節(jié)點(diǎn)數(shù)組和邊緣數(shù)組的JSON對(duì)象。每個(gè)節(jié)點(diǎn)都需要一個(gè)“ id”。邊緣需要一個(gè)“從”和“到”,分別是每個(gè)連接的源和目標(biāo)。
像這樣:
nodes: [{ "id": "Lannister" }]
edges: [{ "from": "Lannister", "to": "Tully" }]
然后,我們需要導(dǎo)入數(shù)據(jù)。為JavaScript數(shù)據(jù)可視化加載數(shù)據(jù)有時(shí)會(huì)很麻煩。但是使用AnyChart, 處理數(shù)據(jù) 確實(shí)非常簡(jiǎn)單。利用正確的功能,您可以輕松導(dǎo)入CSV,JSON,XML甚至Google電子表格!
在這里,我們的數(shù)據(jù)為JSON格式,因此我們需要以下功能:
anychart.data.loadJsonFile('//static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json', function (data) { // The chart code goes here. })因?yàn)槲覀兿M麅H在成功加載數(shù)據(jù)之后才繪制圖表,所以我們將放置代碼以在該函數(shù)中繪制圖表。
4.繪制圖表
第四步也是最后一步是繪制圖表。在這里,我們命令根據(jù)數(shù)據(jù)創(chuàng)建一個(gè)圖表,設(shè)置圖表標(biāo)題,然后使用這些非常簡(jiǎn)單的函數(shù)將圖形可視化:
// create a chart from the loaded data var chart = anychart.graph(data); // set the title chart.title("Network Graph showing the battles in Game of Thrones"); // draw the chart chart.container("container").draw();結(jié)果如下:
也許不如我們基于D3.js的靈感在美學(xué)上給人留下深刻的印象,但我們稍后會(huì)談到。花一些時(shí)間將鼠標(biāo)懸停在節(jié)點(diǎn)上,或者將它們拖動(dòng)一點(diǎn)。多么驚人?通過(guò)這四個(gè)簡(jiǎn)單步驟和幾行JavaScript代碼,我們創(chuàng)建了這個(gè)功能強(qiáng)大且交互式的網(wǎng)絡(luò)圖。
完整的代碼如下,檢查出來(lái):
<html> <head> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json", function (data) { // create a chart from the loaded data var chart = anychart.graph(data); // set the title chart.title("Network Graph showing the battles in Game of Thrones"); // draw the chart chart.container("container").draw(); }); }); </script> </body> </html>自定義網(wǎng)絡(luò)圖外觀
正如我們目前的可視化效果一樣,我們可以做得更好。好了很多。所有不錯(cuò)的JS圖表庫(kù)都允許您自定義使用其API構(gòu)建的圖表。作為數(shù)據(jù)可視化開(kāi)發(fā)人員,利用這些自定義更好地講述您的數(shù)據(jù)故事是一項(xiàng)關(guān)鍵技能。這些定制中的一些是美觀的,例如更改元素的大小或顏色,而某些功能是在更改工具提示時(shí)。
下面,我將展示一些可用于網(wǎng)絡(luò)圖的自定義技術(shù)。
更改迭代步驟
網(wǎng)絡(luò)圖是使用一種算法繪制的,該算法反復(fù)嘗試改善其布局。對(duì)于每次迭代,算法都會(huì)根據(jù)誤差度量進(jìn)一步優(yōu)化步驟。這表明迭代次數(shù)越多越好。但是,有時(shí)算法對(duì)優(yōu)化布局的想法與您(以及您的用戶(hù))對(duì)優(yōu)化布局的想法可能會(huì)大不相同。通過(guò)更改迭代次數(shù),我們可以獲得適合我們需求的不同布局。
在下面添加代碼,您將看到如果僅使用10次迭代(默認(rèn)值為500),將會(huì)發(fā)生什么情況。
// set the iteration step
chart.layout().iterationCount(10);
定制節(jié)點(diǎn)(基本):
我們可以自定義每個(gè)節(jié)點(diǎn)的大小,填充和筆觸,以及為每個(gè)狀態(tài)設(shè)置不同的規(guī)則。狀態(tài)表示默認(rèn)節(jié)點(diǎn),懸停的節(jié)點(diǎn)或選定的節(jié)點(diǎn)。可以使用與設(shè)置CSS顏色相同的方式來(lái)設(shè)置JavaScript網(wǎng)絡(luò)圖中的顏色,這里我們將使用十六進(jìn)制代碼。
// set the size of nodes nodes.normal().height(30); nodes.hovered().height(45); nodes.selected().height(45); // set the fill of nodes nodes.normal().fill("#ffa000"); nodes.hovered().fill("white"); nodes.selected().fill("#ffa000"); // set the stroke of nodes nodes.normal().stroke(null); nodes.hovered().stroke("#333333", 3);nodes.selected().stroke("#333333", 3);
自定義節(jié)點(diǎn)(高級(jí)):
就個(gè)人而言,對(duì)于網(wǎng)絡(luò)圖,我最喜歡的美學(xué)更改是將節(jié)點(diǎn)圖標(biāo)替換為圖像。在這里,我們可以用圖像替換韋斯特羅斯(我們的節(jié)點(diǎn))的大房子。通過(guò)將圖像的文件路徑添加到我們JSON中每個(gè)節(jié)點(diǎn)的對(duì)象上,可以輕松完成此操作。例如:
{id: "Example", fill: { src: "example_url" } },我已經(jīng)進(jìn)行了更改,可以在這里找到更新的文件。通過(guò)將此JSON與包含的圖像一起使用,我們得到以下圖形:
節(jié)點(diǎn)標(biāo)簽
并非所有人都知道每所房子的標(biāo)語(yǔ),不得不將鼠標(biāo)懸停在每個(gè)節(jié)點(diǎn)上以查看它屬于哪個(gè)節(jié)點(diǎn)可能會(huì)非常痛苦。為了解決這個(gè)問(wèn)題,我們可以標(biāo)記每個(gè)節(jié)點(diǎn)。使用以下代碼即可輕松完成此操作:
// enable the labels of nodes chart.nodes().labels().enabled(true); // configure the labels of nodes chart.nodes().labels().format("{%id}"); chart.nodes().labels().fontSize(12); chart.nodes().labels().fontWeight(600);結(jié)果是:
為了方便起見(jiàn),這是此交互式Java網(wǎng)絡(luò)圖(此教程的最終版本)的完整代碼,該可視化圖像將有關(guān)權(quán)力游戲之戰(zhàn)的數(shù)據(jù)可視化:
<html> <head> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script> <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data_images.json", function (data) { // create a chart from the loaded data var chart = anychart.graph(data); // set the title chart.title("Network Graph showing the battles in Game of Thrones"); // access nodes var nodes = chart.nodes(); // set the size of nodes nodes.normal().height(30); nodes.hovered().height(45); nodes.selected().height(45); // set the stroke of nodes nodes.normal().stroke(null); nodes.hovered().stroke("#333333", 3); nodes.selected().stroke("#333333", 3); // enable the labels of nodes chart.nodes().labels().enabled(true); // configure the labels of nodes chart.nodes().labels().format("{%id}"); chart.nodes().labels().fontSize(12); chart.nodes().labels().fontWeight(600); // draw the chart chart.container("container").draw(); }); }); </script> </body> </html>
結(jié)論
就像這樣,我們有了很棒的可視化工具,可以解開(kāi)該網(wǎng)絡(luò)中的復(fù)雜關(guān)系。在本教程中,我展示了啟動(dòng)和運(yùn)行JS網(wǎng)絡(luò)圖表的過(guò)程是多么快速和容易,以及通過(guò)多一點(diǎn)的努力,我們就能通過(guò)一些選擇調(diào)整真正使圖表變得生動(dòng)起來(lái)。
如果本教程激發(fā)了您對(duì)基于演出的圖表的興趣,請(qǐng)查看此精彩絕倫的32權(quán)力游戲數(shù)據(jù)可視化列表。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: