我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。

工具選擇

工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

• flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創建Flow Chart
• go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具 ，支持各種交互式圖表的創建。有免費版和收費版
• joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
• jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具 ，小巧精悍，使用簡單
• d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。

構建靜態應用

下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。

最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實例

node是我們用addNode方法創建的Node實例

ports，是一個string的數組，指定端點的個數和名字

type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。

這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。

最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數來連接端點：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。

調用以上方法來創建節點，端點和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：

最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創建節點

我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。

通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創建一個tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹上有兩個節點:

然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。

好了，一個繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務上了， 大家有興趣可以去試試。

形圖可視化廣泛用于分層數據分析。如果你沒有經驗還想創建一個，那將會有些復雜。下面是一個詳細教程，教你如何使用JavaScript創建交互式樹形圖。

宇宙中只有我們嗎？我們每個人都曾在某個時候問過自己這個問題。當我們在考慮地球是否是宇宙中唯一可居住的行星時，我們可能會思考宇宙究竟有多大。讓我們在樹形圖的幫助下看看吧！在本教程中，我們將使用樹形映射出宇宙中已知的10個最大的星系。

什么是樹形圖？

在進入教程之前，了解一下樹形圖的概念。樹形圖是一種流行的技術，用于將分層組織、樹狀結構的數據可視化。它可以一目了然地展示出層次結構以及各個數據點的值，它使用了大小與相應數量成比例的嵌套矩形。

樹的每個分支都是一個矩形，對于子分支，其中嵌套了較小的矩形。通過顏色和接近度顯示數據，樹形圖可以輕松表示大量數據，同時有效利用空間，非常適合比較層次結構中的比例。

樹形圖類型是由Ben Shneiderman教授發明的，他在信息設計和人機交互領域作出了重大貢獻。樹形圖被用于許多數據可視化領域，可用于分析股票市場、人口普查系統和選舉統計數據，以及數據新聞、硬盤探索工具等。

瀏覽JS樹形圖

下面將使用JavaScript構建一個樹形圖來比較已知宇宙中排名前10的星系的大小。JS樹狀圖在本教程結束時的樣子：

創建一個基本的JS樹形圖

創建基于JavaScript的樹狀圖通常需要以下四個基本步驟：

1. 創建一個HTML頁面

2. 參考JavaScript文件

3. 設置數據

4. 編寫一些JS樹代碼

如果你是 HTML、CSS 和JavaScript方面的新手，請不要擔心。本文將詳細介紹每一步，在學習完本教程之后，你可以嘗試去做自己的JS樹狀圖。

1. 創建一個HTML頁面

首先需要創建一個基本的HTML頁面。添加一個HTML塊元素 (<div>)，并將樹形圖放置其中，為其分配一個ID屬性（讓它成為“容器”），以便稍后在代碼中引用它。

然后為 <div> 設置一些樣式。將寬度和高度屬性定義為 100%，邊距和填充為 0。當然，你可以根據自己的喜好進行更改。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <style type="text/css">   
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. 參考JavaScript文件

接下來，需要引用所需腳本，用這些腳本創建樹形圖。

現在有多個JavaScript圖表庫可供選擇。創建交互式數據可視化的基本步驟與它們中的任何一個都是差不多的。在這里，為了說明問題，我將使用AnyChart，它支持樹形圖并有免費版本，其源代碼在GitHub上開放。

因此，要構建樹形圖，需要導入“核心”和“樹形圖”模塊。在第一步創建的HTML頁面的 head 部分中引用它們。從 CDN 獲取它們（或下載文件）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.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>
  </body>
</html>

3.設置數據

設置數據后將把已知宇宙中最大的前10個星系的規模可視化。這些星系非常龐大，所以需要以它們的直徑來衡量它們是多少光年（光年是一束光在一個地球年中傳播的距離，相當于大約 6 萬億英里）。

我已經從 Largest.org 獲取了星系尺度的數據。

對于圖表，樹結構數據根基元素是“星系”，（按星系類型）分為“橢圓”和“螺旋”作為其子元素，它們又有個別星系對象的數組作為它們自己的子元素。

每個星系對象都具有<名稱 \ 尺度>鍵值屬性。例如，{name: "IC 1101", value: 4000000} 表示規模為 4,000,000 光年的 IC 1101 星系。說實話，很難理解它有多大。

var dataSet = [
  {name: "Galaxies", children: [
    {name: "Elliptical", children: [
      {name: "IC 1101", value: 4000000},
      {name: "Hercules A", value: 1500000},
      {name: "A2261-BCG", value: 1000000},
      {name: "ESO 306-17", value: 1000000},
      {name: "ESO 444-46", value: 402200},
    ]},
    {name: "Spiral", children: [  
      {name: "Rubin's Galaxy", value: 832000},
      {name: "Comet Galaxy", value: 600000},
      {name: "Condor Galaxy", value: 522000},
      {name: "Tadpole Galaxy", value: 280000},
      {name: "Andromeda Galaxy", value: 220000} 
    ]}
  ]}
];

4. 編寫一些JS樹形圖代碼

到此只需幾行JavaScript代碼就可以為樹形圖提供動力。

1.使用anychart.onDocumentReady() 函數，加載樹形圖的所有JavaScript代碼，確保它在網頁完全加載并準備執行。

<script>
  anychart.onDocumentReady(function () {
    // JS樹映射代碼會寫到這里
  });
</script>

2.然后，從第3步開始在樹形圖中添加我們想要可視化的數據。

<script>
 
  anychart.onDocumentReady(function () {
 
    var dataSet = [
      {name: "Galaxies", children: [
        {name: "Elliptical", children: [
          {name: "IC 1101", value: 4000000},
          {name: "Hercules A", value: 1500000},
          {name: "A2261-BCG", value: 1000000},
          {name: "ESO 306-17", value: 1000000},
          {name: "ESO 444-46", value: 402200},
        ]},
        {name: "Spiral", children: [  
          {name: "Rubin's Galaxy", value: 832000},
          {name: "Comet Galaxy", value: 600000},
          {name: "Condor Galaxy", value: 522000},
          {name: "Tadpole Galaxy", value: 280000},
          {name: "Andromeda Galaxy", value: 220000} 
        ]}
      ]}
    ];
 
  });
 
</script>

3.添加以下代碼將數據轉換到圖上。

var chart = anychart.treeMap(dataSet, "as-tree");

4.添加一個標題，將圖表放入之前定義的 <div> 容器中，并使用 draw 命令顯示它。

chart.title("The 10 Largest Galaxies in the Known Universe");
chart.container("container");
chart.draw();

現在JS樹形圖基本上已經準備好了：

加載樹形圖時，只會顯示兩個圖塊，“橢圓”和“螺旋”。然后可以單擊它們，展開其各自的子星系，這就是所謂的下鉆操作。

為什么會只有兩塊？因為默認情況下，最大深度值設置為1。這意味著一次只能看到其父級的一個級別。較低的級別是隱藏的。在第一層，將“星系”分為“橢圓”和“螺旋”，所以只能看到這一層。

顯示所有星系圖塊只需要使用maxDepth()函數更改最大深度值。

chart.maxDepth(2);

效果如下：

在這張圖表中，可以看到星系是如何根據層次結構進行分組的，還可以單擊頂部的“橢圓”或“螺旋”標題來放大其子星系。

完整代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.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 () {
 
        // 創建數據
        var dataSet = [
          {name: "Galaxies", children: [
            {name: "Elliptical", children: [
              {name: "IC 1101", value: 4000000},
              {name: "Hercules A", value: 1500000},
              {name: "A2261-BCG", value: 1000000},
              {name: "ESO 306-17", value: 1000000},
              {name: "ESO 444-46", value: 402200},
            ]},
            {name: "Spiral", children: [  
              {name: "Rubin's Galaxy", value: 832000},
              {name: "Comet Galaxy", value: 600000},
              {name: "Condor Galaxy", value: 522000},
              {name: "Tadpole Galaxy", value: 280000},
              {name: "Andromeda Galaxy", value: 220000} 
            ]}
          ]}
        ];
        
        // 創建樹形圖并設置數據
        var chart = anychart.treeMap(dataSet, "as-tree");
 
        // 設置圖表標題
        chart.title("The 10 Largest Galaxies in the Known Universe");
 
        // 設置圖表的容器id
        chart.container("container");
 
        // 開始繪制圖表
        chart.draw();
 
      });
 
    </script>
  </body>
</html>

現在，你可以一目了然地看到10個最大星系的規模并進行比較。下面展示如何自定義JavaScript樹形圖。

自定義JS樹形圖

A. 改變顏色

改變任何圖表的外觀和感覺有一種簡單方法就是更改顏色。

chart.normal().fill('#B46FC2');
chart.hovered().fill('#44008B', 0.8);
chart.selected().fill('#0A0068', 0.8);
chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);

添加了fill()和hashFill()方法來更改樹形圖的顏色。

B. 應用線性色標

在樹形圖中，除了大小，圖塊的顏色也有助于突出顯示比例。可以借助線性色標根據相應的數據維度自動為圖塊著色。

創建一個線性色標，為其提供兩個值，一個為最低范圍值，另一個為最高值，最后啟用顏色范圍。

var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');

實現這些需要修改上一節中的代碼。

C. 格式化標簽和工具提示

可以使用HTML來格式化標簽。為此，需要為標簽啟用 HTML。然后，你就可以不受限制地使用HTML對它們進行格式化。

可以把標簽格式化為<span>HTML元素，并對其進行樣式設計，以增加字體大小和改變顏色。

chart.labels().useHtml(true);
chart.labels().format(
  "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
);

正如你在上面的代碼片段中看到的，還使用了{%name}和{%value}標記，用來更改樹形圖標簽和工具提示的文本。這樣，在創建可視化時將為每個星系輸出名稱和比例值。

此外，使用format()方法來定制工具提示的文本。一個內容豐富的工具提示有助于更好地理解數據。

chart.tooltip().format(
    "Scale: {%value} light-years"
);

D. 按升序排列圖塊

默認情況下，樹形圖圖塊按降序排列。可以看到星系是從高到低排列的，規模最大的IC 1101星系是左起第一個。

如果需要升序排列，那么添加：

chart.sort("asc");

下面是一個完整 樣例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Treemap Chart</title>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.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 () {
 
        // create the data
        var dataSet = [
          {name: "Galaxies", children: [
            {name: "Elliptical", children: [
              {name: "IC 1101", value: 4000000},
              {name: "Hercules A", value: 1500000},
              {name: "A2261-BCG", value: 1000000},
              {name: "ESO 306-17", value: 1000000},
              {name: "ESO 444-46", value: 402200},
            ]},
            {name: "Spiral", children: [  
              {name: "Rubin's Galaxy", value: 832000},
              {name: "Comet Galaxy", value: 600000},
              {name: "Condor Galaxy", value: 522000},
              {name: "Tadpole Galaxy", value: 280000},
              {name: "Andromeda Galaxy", value: 220000} 
            ]}
          ]}
        ];

        // create the treemap chart and set the data
        var chart = anychart.treeMap(dataSet, "as-tree");
 
        // set the chart title
        chart.title("The 10 Largest Galaxies in the Known Universe");

        // set a custom color scale
        var customColorScale = anychart.scales.linearColor();
        customColorScale.colors(['#37B8F7', '#ffcc00']);
        chart.colorScale(customColorScale);
        chart.colorRange().enabled(true);
        chart.colorRange().length('90%');

        // format the labels
        chart.labels().useHtml(true);
        chart.labels().format(
          "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
        );
  
        // format the tooltips
        chart.tooltip().format(
          "Scale: {%value} light years"
        );

        // sort in ascending order
        chart.sort("asc");
 
        // set the container id for the chart
        chart.container("container");
 
        // initiate drawing the chart
        chart.draw();
 
      });
 
    </script>
  </body>
</html>

結論

恭喜現在已經學會了輕松地創建出色的交互式JavaScript樹形圖！請參閱樹形圖文檔 ， 以 便 了解它還可以做些什么，或者使用不同的圖表庫。