3
A
回答
4
查找樹圖/矩形式樹狀結構繪圖法。這是如何Wikipedia描述它們：
「以信息的可視化和計算，矩形式樹狀結構繪圖法是用於通過使用嵌套的矩形顯示的階層數據的方法[...]
樹狀圖顯示分層（樹形結構）數據作爲一組 嵌套矩形，樹的每個分支都被賦予一個矩形，然後 用代表子分支的較小矩形平鋪A 葉節點的矩形具有與指定的數據維度成比例的面積 「。
利用這種技術的一個值得注意的工具是WinDirStat。他們的網站也將這種可視化方式稱爲樹形圖。
鑑於此術語，您應該能夠輕鬆找到一個可通過執行a web search即可生成它們的JavaScript庫。 （我不推薦以下任何內容，因爲我沒有使用它們，但鏈接的Google搜索在第一個結果頁面上找到了jsTreemap，Plotly.js，Google Charts和其他一些內容）。
If你好奇的算法（一個或多個）這些圖的背後，這些文件可能會感興趣：
3
它被稱爲treemap，而ZingChart是一個JavaScript圖表庫。這是繪製分層數據的有用方法。它還允許用戶進行交互，因爲用戶可以進一步鑽取樹形圖。看看下面的演示。
var myConfig = {
"graphset":[
{
"type":"treemap",
"plotarea":{
"margin":"0 0 30 0"
},
"tooltip":{
},
"options":{
},
"series":[
{
"text":"North America",
"children":[
{
"text":"United States",
"children":[
{
"text":"Texas",
"value":21
},
{
"text":"California",
"value":53
},
{
"text":"Ohio",
"value":12
},
{
"text":"New York",
"value":46
},
{
"text":"Michigan",
"value":39
},
{
"text":"Alabama",
"value":25
}
]
},
{
"text":"Canada",
"value":113
},
{
"text":"Mexico",
"value":78
}
]
},
{
"text":"Europe",
"children":[
{
"text":"France",
"value":42
},
{
"text":"Spain",
"value":28
},
{
"text":"Switzerland",
"value":13
},
{
"text":"Germany",
"value":56
},
{
"text":"Cyprus",
"value":7
}
]
},
{
"text":"Africa",
"children":[
{
"text":"Egypt",
"value":22
},
{
"text":"Congo",
"value":38
},
{
"text":"Lesotho",
"value":9
}
]
},
{
"text":"Asia",
"children":[
{
"text":"India",
"value":92
},
{
"text":"China",
"value":68
},
{
"text":"Mongolia",
"value":25
}
]
},
{
"text":"South America",
"children":[
{
"text":"Brazil",
"value":42
},
{
"text":"Argentina",
"value":28
},
{
"text":"Peru",
"value":15
},
{
"text":"Uruguay",
"value":33
}
]
},
{
"text":"Australia (continent)",
"children":[
{
"text":"Australia (country)",
"value":121
},
{
"text":"New Zealand",
"value":24
}
]
}
]
}
]
};
zingchart.render({
\t id : 'myChart',
\t data : myConfig,
\t height: 400,
\t width: 600
});<head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script>zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
\t </head>
\t <body>
\t \t <div id='myChart'></div>
\t </body>關於樹圖的更多信息，請閱讀這篇博客：https://blog.zingchart.com/2015/03/10/treemaps-charting/
免責聲明：我在ZingChart隊。如果您有更多問題，請告訴我。謝謝！