echarts網狀模型研究
參考導向力算法D3.js，有很多例子，最終的目標就是分開相互關聯畫圖覆蓋問題
echarts裏面也有能夠實現畫圖的例子
我們今天主要分析下echarts中關係圖graph的數據模型
通過找到例子中的數據發現，https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/examples/data/asset/data/webkit-dep.json的json數據爲
{
"type": "force",
"categories": [
{
"name": "HTMLElement",
"keyword": {},
"base": "HTMLElement"
},
{
"name": "WebGL",
"keyword": {},
"base": "WebGLRenderingContext"
},
{
"name": "SVG",
"keyword": {},
"base": "SVGElement"
},
{
"name": "CSS",
"keyword": {},
"base": "CSSRule"
},
{
"name": "Other",
"keyword": {}
}
],
"nodes": [
{
"name": "AnalyserNode",
"value": 1,
"category": 4
},
{
"name": "AudioNode",
"value": 1,
"category": 4
}],
"links": [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
}]
}
categories--代表類別，相當於需要把哪些規到一類中，比如：html語言元素下面有很多標籤<a> <div>
而這些元素相當於node，而web系統中又用到了css、webgl，他們之前會聯合系統應用來構建web系統，
此時我們就知道可以把這些元素的關係找到
node --代表需要查找目標元素
{
"name": "AnalyserNode",
"value": 1,
"category": 4
}
name代表該元素的名稱，可以在圖形遠點中展示，value這裏沒有使用，我估計是爲了展示原點大小用的，這裏全給製成了1代表全部大小一樣，category代表上面說的類別，會將相同類別用相同的顏色標出
最後
"links": [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
}
因爲是json數據，每個數據都有自己的編號順序，
"source": 0,"target": 1
代表第0個node與第1個node之間有關聯，依次類推