力導圖——節點平均分佈（通過固定節點座標）

阿新 • • 發佈：2018-11-29

力導圖——節點平均分佈（通過固定節點座標）

效果圖

這裡寫圖片描述

需要的工具包：Echarts.js、force.js (可從Echarts的官網下載)

也可以下載完整的demo

步驟

html模組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定節點，子節點平均分佈</title>
    <script src="echarts.js"></script>   
    <!--  這裡的ecarts.js用的是2.2.7版本的，新版本也是可以的 --> 

</head>
<body>

    <div id="chart" style="width: 1000px; height: 600px"></div>  

<!--  這裡的div塊為圖表佔位符，id必須要-->           
    <script src="relation_graph.js"></script>   
    <!-- 實現力導圖的js-->
</body>
</html>

demo的中force.js的存放路徑為：dist/chart/force.js

js模組

require.config({
    paths : {
        echarts : 'dist'   //存放Echarts 的路徑  
        //強調，這裡用的Echarts.js是2.2.7版本的，新版本的，可能不行。
    }
});

require([ "echarts", "echarts/chart/force"], 
//echarts/chart/force
function(ec) {
var myChart = ec.init(document.getElementById('chart'), 'macarons');   //chart 為放圖表的div塊的id 

var option = {
    tooltip : {
        show : false  //工具欄，顯示為true
    },

    series : [ {
        type : 'force',
        name : "Force tree",
        draggable:false,   //拖動，可拖放
        // useWorker:true,
        steps:1,
        gravity:0.6,

        roam:false,
        itemStyle : {

            normal : {
                linkStyle: {
                    type: 'curve',
                    color:'#2aaa90',
                    width:2
                }

            },

            emphasis:{
                label : {show : true},
                nodeStyle : {
                    color:'#f1ab66',
                    borderColor : 'rgba(255,255,255,1)',
                    borderWidth : 3
                }
            }
        },

        categories : [ 

            //第一型別節點的樣式

            {
                name : '0',
                symbolSize:40,         //節點大小
                itemStyle:{
                    normal:{//正常
                        color:'#24b1b6',
                        borderColor:'#18838b',
                        borderWidth:6,
                        borderWidth : 0,
                        label : {
                            show : true,
                            textStyle:{
                                fontSize:18
                            }
                        }

                    },

                    emphasis:{ //強調，即滑鼠覆蓋或點選時的樣式
                        borderWidth:6,
                        borderColor:'#fff',
                        label : {
                            show : true,
                            textStyle:{
                                fontSize:18
                            }
                        }
                    }
                }
            }, 

            //第二型別節點的樣式

            {
                name : '1',
                symbolSize:20,
                itemStyle:{
                    normal:{
                        color:'#2aaa90',
                        borderWidth : 0,
                        label : {
                            show : true,
                            textStyle:{
                                fontSize:15
                            }
                        } 
                    },
                    emphasis:{
                        borderColor:'#fff',
                        label : {
                            show : true,
                            textStyle:{
                                fontSize:15
                            }
                        }
                    }
                }
            }, 

            //第三型別節點的樣式

            {
                name : '2',
                symbolSize:35,
                itemStyle:{
                    normal:{
                        color:'#24b6bc',
                        borderWidth : 0,
                        label : {
                            show : true,
                            textStyle:{
                                fontSize:18
                            }
                        } 
                    },

                    emphasis:{
                        borderWidth:4,
                        borderColor:'#fff',

                        label : {
                            show : true,
                            textStyle:{
                                fontSize:18
                            }
                        }
                    }
                }
            }
        ],

        nodes : [
            {id:0,category:0,name:'film',label:'班級',ignore:false,flag:true,initial:[500,300],fixX:true,fixY:true},
            {id:1,category:1,name:'role',label:'職位1',ignore:true,flag:true},
            {id:2,category:1,name:'role1',label:'職位2',ignore:true,flag:true},
            {id:3,category:1,name:'role2',label:'職位3',ignore:true,flag:true},
            {id:4,category:1,name:'role3',label:'職位4',ignore:true,flag:true},
            {id:5,category:1,name:'role4',label:'職位5',ignore:true,flag:true}, 
            {id:6,category:1,name:'role5',label:'職位6',ignore:true,flag:true},
            {id:7,category:2,name:'0',label:'小小',ignore:true,flag:true},
            {id:8,category:2,name:'1',label:'小西',ignore:true,flag:true},
            {id:9,category:2,name:'2',label:'小利',ignore:true,flag:true},
            {id:10,category:2,name:'3',label:'多多',ignore:true,flag:true},
            {id:11,category:2,name:'4',label:'德',ignore:true,flag:true},
            {id:12,category:2,name:'5',label:'大衛',ignore:true,flag:true},

        ],

        links : [   //順序有要求的
            {source : 1,target : 0}, 
            {source : 2,target : 0}, 
            {source : 3,target : 0},
            {source : 4,target : 0}, 
            {source : 5,target : 0}, 
            {source : 6,target : 0}, 
            {source : 7,target : 1}, 
            {source : 8,target : 2}, 
            // {source : 9,target : 2}, 
            {source : 9,target : 3}, 
            {source : 10,target : 4}, 
            {source : 11,target : 5},
            {source : 12,target : 6},
        ]

    }]
};

(function(){
    //link 集
    var linksSet = option.series[0].links;   
    //節點集 
    var nodesSet = option.series[0].nodes;      
    //用於存放角色列表
    var roleList = [];  
    for(var i=0;i<linksSet.length;i++){
        if(linksSet[i].target == 0){
            roleList.push(linksSet[i].source);
            }
        else continue;
        }
    //每一小份的度數
    var each = Math.PI*2/roleList.length;   
    //alert(Math.cos(each));
    var tx;
    var ty; 
    for(var i=0;i<roleList.Length;i++){
        //雙重迴圈初始化第一層子節點以及第二層子節點的座標
        tx = 280 + 67*Math.cos(each*(i+1));
        ty = 300 - 67*Math.sin(each*(i+1));
        nodesSet[roleList[i]].initial = [tx,ty];
        nodesSet[roleList[i]].fixX = true;
        nodesSet[roleList[i]].fixY = true;      
        for(var j=1;j<linksSet.length;j++){
            if(linksSet[j].target == roleList[i]){
                var ttx = 280 + 270*Math.cos(each*(i+1));
                var tty = 300 - 270*Math.sin(each*(i+1));           
                nodesSet[linksSet[j].source].initial = [ttx,tty]; //設定座標

                //將fixX和fixY設定為true,座標才起作用。
                nodesSet[linksSet[j].source].fixX = true;
                nodesSet[linksSet[j].source].fixY = true;
                }
            }
        }
    })()
myChart.setOption(option);
var ecConfig = require('echarts/config');
//當滑鼠點選節點，會展開該節點的延伸
function showNodes(param) {
    //可在此新增點選事件
    var data = param.data;
    if(data.flag == false){
        return false;
    }
    var option = myChart.getOption();
    var nodesOption = option.series[0].nodes;
    var linksOption = option.series[0].links;
    for(var i=1;i<nodesOption.length;i++){
        nodesOption[i].ignore = false;
        }

     myChart.setOption(option);
}
myChart.on(ecConfig.EVENT.HOVER,showNodes);
});

完整程式碼如上，可下載demo

力導圖——節點平均分佈（通過固定節點座標）

力導圖——節點平均分佈（通過固定節點座標）效果圖需要的工具包：Echarts.js、force.js (可從Echarts的官網下載) 也可以下載完整的demo 步驟 html模組 <!DOCTYPE html> <html lang=

vis.js力導向圖第四彈——雙擊擴充套件節點（去重版）

正經學徒，佛系記錄，不搞事情基於上文：https://blog.csdn.net/qq_31748587/article/details/84230416 的專案可擴充套件的圖最終都要面臨的一個問題就是擴充套件後節點的重複舉個栗子：首先將節點形狀設定為“點dot

非監督學習演算法（聚類、降維、關聯規則挖掘）--機器學習--思維導圖手寫筆記（32）

一、思維導圖（點選圖方法）二、補充筆記三、K-means演算法的收斂性說明：當聚類中心μ確定時，求得的各個資料的cluster滿足聚類目標函式最小。當資料cluster確

用D3畫簡單的力導圖

var forceTree3 = function(setting) { var relations = setting.relations, links = setting.links, selector = setting.selector

echarts力導向圖的前後臺互動（ajax+json+struts）

目標：用百度研發的echarts資料視覺化外掛做個關係圖環境：myeclipse+echarts3.0+struts2 html程式碼 <!DOCTYPE html> &

思維導圖趨勢大分析（MindMaster與百度腦圖)

思維導圖現在可以說是大流行期間，涉及學習、工作、生活方方面面的內容。一、什麼是思維導圖思維導圖的英文名稱是The Mind Map，也叫做心智導圖，腦圖，心智地圖，腦力激盪圖等。思維導圖應用圖文兼具的方法，把各個主題內容的關係用相互隸屬與相互層級圖呈現出來。 &

wamp圖標為黃色（非端口號問題）

pac bsp log 進入找到配置 services src 沒有 1、Win鍵+R 輸入:services.msc 進入服務，找到wamp,看哪個服務沒有啟動 2、手動啟動apache服務失敗，彈出以下錯誤 3、然後在cmd命令行中切換到你的apache的b

[轉]opencv3 圖像處理之圖像縮放（ python與c++實現）

space original 註意 libs 波紋輸出 uil iostream 3.5 轉自：https://www.cnblogs.com/dyufei/p/8205121.html 一. 主要函數介紹 1) 圖像大小變換 cvResize () 原型： void

[Python] 動態函數調用（通過函數名）

context compile function icm 字符串函數 real state for 輸出結果 2018-04-09 update 利用python中的內置函數 eval() ，函數說明： def eval(*args, **kwargs): # re

工具類-發送郵件（通過JavaMail發送）

final string SM ttr nal support ket 實體 nts 　　前段時間在工作中用到了郵件發送監控的報警信息，今天在這個記錄一下JavaMail的郵件工具類。　　下邊為用到的JavaMail的jar包的pom依賴。這裏用的是JavaMail的1.

無向圖歐拉道路（歐拉回路）的判定與路徑打印

clu clas 檢查 names 連通圖思路 return space 計算歐拉道路描述的是無向圖的一個頂點出發的一條道路能夠經過每條邊恰好一次歐拉回路指的是任意點出發都滿足上述性質如果一個圖是歐拉道路或者歐拉回路，必須滿足兩個條件第一個條件，這個圖是連通圖第

深度圖轉點雲（Xtion/Kinect/OB等）

深度圖轉點雲（Xtion/Kinect/OB等）今天分享一個將深度圖轉點雲的方法。　　所謂的深度圖一般指從深度相機中讀取到的帶有深度資訊的一幀資料，一般為16bit的png/pgm格式。深度圖不適合直觀的去察看，點雲的效果會更強，所以，一般我們都是將深度圖轉成點

Activiti的簡單配置與開發（通過Idea設計流程圖）

原文地址：https://blog.csdn.net/c1225992531/article/details/81181017 使用idea進行activiti工作流開發 emmm.......因為工作需要，所以要學習activiti工作流，初次學習，寫個部落格記錄一下，下次再用就知道大概流程了

9、CentOS7 安裝Docker之擴充套件（通過埠連線容器）

通過埠連線容器 Docker容器從一開始就設計用來執行服務。在大多數情況下，會是一種HTTP服務或其它。其中很大一部分是通過瀏覽器訪問的Web服務。這會導致一個問題。如果你有多個執行在它們內部環境的80埠上的Docker容器，它們不能都通過你機器上的80埠訪問。下一次技術點將

vue元件—父元件向子元件傳值（通過屬性繫結）

注意： 1.資料繫結時，可能由於某種命名的規範方法或者屬性名字不能是帶有駝峰或者連字元的。並且繫結之後，還要放到子元件的 props資料後，方可呼叫。 2.子元件呼叫的父元件的屬性，只能讀不能寫。同時，子元件的屬性是其私有的，Ajax請求返回data屬性變化也只是子元件

windows下使用FFmpeg生成YUV視訊檔案並播放（通過命令的方式）

一、YUV的定義 YUV是一種顏色編碼方法。它跟我們常見的RGB格式區分開來，常使用在各個視訊處理元件中。其中"Y"代表明亮度,"U"和"V"代表其色度。視訊播放器把市面上流行的MP4等格式的視訊檔案解碼出來，得到的一般會是YUV格式的資料，然後得進行轉碼（比如通過op

圖的遍歷（深度優先遍歷）

首先來講一下資料結構中圖的基本概念：什麼是圖結構: 圖資料結構是每個資料元素之間可以任意關聯，構成了圖結構。正是這種任意關聯性，導致圖結構中的資料關係的複雜性。典型的圖結構包含兩個部分：頂點（vertex)：圖中的資料元素。邊(Edge)：圖中連線這些頂點

圖及其衍生演算法（Graphs and graph algorithms）

1. 圖的相關概念　　　　樹是一種的圖，相比樹，圖更能用來表示現實世界中的的實體，如路線圖，網路節點圖，課程體系圖等，一旦能用圖來描述實體，能模擬和解決一些非常複雜的任務。圖的相關概念和詞彙如下：　　　　　　頂點vertex：圖的節點　　　　　　邊Edge：頂點間的連線，若邊具有方向時，組成有向圖

ssm （通過ajax展示資料）日期格式化相關問題

第一種方式：實體類加入 @DateTimeFormat(pattern = "yyyy-MM-dd") @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8

python多執行緒爬蟲+批量下載鬥圖啦圖片專案（關注、持續更新）

python多執行緒爬蟲專案（）爬取目標：鬥圖啦（起始url：http://www.doutula.com/photo/list/?page=1）爬取內容：鬥圖啦全網圖片使用工具：requests庫實現傳送請求、獲取響應。　　　　　　　xpath實現資料解析、提取和清洗　　　　　　　thr

力導圖——節點平均分佈（通過固定節點座標）