D3系列第三彈——繪製力導向圖

阿新 • • 發佈：2019-01-15

關於力導向圖，學習之前要知道，力導向圖是什麼，它的特點是什麼。

力引導演算法主要應用與複雜網路視覺化。將物件抽象成圖中的點，有關係的兩點間繪製一條線，從力導向圖，我們可以明顯的知道點之間的親疏關係。

使用資料集json檔案：

{
  "nodes": [
    { "name": "桂林" }, { "name": "廣州" },
    { "name": "廈門" }, { "name": "杭州" },
    { "name": "上海" }, { "name": "青島" },
    { "name": "天津" }, { "name": "昆明" },
    { "name": "大理" }, { "name": "瀋陽" },
    { "name": "成都" }, { "name": "包頭" },
    { "name": "宜賓" }, { "name": "眉山" },
    { "name": "綿陽" }, { "name": "樂山" }
  ],
  "links": [
    { "source" : 0 , "target": 1 } , { "source" : 0 , "target": 2 } ,
    { "source" : 0 , "target": 3 } , { "source" : 1 , "target": 4 } ,
    { "source" : 1 , "target": 5 } , { "source" : 9 , "target": 11 },
    { "source" : 1 , "target": 2 } , { "source" : 7 , "target": 6 },
    { "source" : 1 , "target": 5 } , { "source" : 4 , "target": 6 },
    { "source" : 1 , "target": 8 } , { "source" : 3 , "target": 5 },
    { "source" : 2 , "target": 5 } , { "source" : 6 , "target": 2 },
    { "source" : 3 , "target": 5 } , { "source" : 8 , "target": 6 }
  ]
}

資料集說明：

nodes是節點，links代表點之間的關係。

HTML檔案程式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3Study</title>
    <script type="text/javascript"src="D3/d3.min.js"></script>
    <style>
        
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node {
            font: 12px sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;

    </style>

</head>
<body>
<div id="force" style="background-color: azure"></div>

</body>
<script type="text/javascript" src="D3/ForceGraph.js"></script>

</html>

JS檔案程式：

/**
 * Created by sdy on 2016/4/25.
 */
var width = 400;
var height = 600;
var svg = d3.select("#force")
    .append("svg")
    .attr("width",width)
    .attr("height",height);

d3.json("Data/ForceGraphData.json", function(error, graph) {
    if (error) throw error;

    var force=d3.layout.force()
        .nodes(graph.nodes)//指定節點陣列
        .links(graph.links)//指定連線陣列
        .size([width,height])//指定範圍
        .linkDistance(100)//指定連線長度
        .charge(-100);//相互之間的作用力
    force.start();//開始作用

    console.log(graph.nodes);
    console.log(graph.links);
//新增連線
    var svg_edges=svg.selectAll("line")
        .data(graph.links)
        .enter()
        .append("line")
        .style("stroke","#ccc")
        .style("stroke-width",1);

    var color=d3.scale.category20();
//新增節點
    var svg_nodes=svg.selectAll("circle")
        .data(graph.nodes)
        .enter()
        .append("circle")
        .attr("r",5)
        .style("fill",function(d,i){
            return color(i);
        })
        .call(force.drag);//使得節點能夠拖動
    //新增描述節點的文字
    var svg_texts=svg.selectAll("text")
        .data(graph.nodes)
        .enter()
        .append("text")
        .style("fill","black")
        .attr("dx",20)
        .attr("dy",8)
        .text(function(d){
            return d.name;
        });
    force.on("tick",function(){//對於每一個時間間隔
        //更新連線座標
        svg_edges.attr("x1",function(d){return d.source.x;})
            .attr("y1",function(d){return d.source.y;})
            .attr("x2",function(d){return d.target.x;})
            .attr("y2",function(d){return d.target.y;});
        //更新節點座標
        svg_nodes.attr("cx",function(d){return d.x;})
            .attr("cy",function(d){return d.y;});
        //更新文字座標
        svg_texts.attr("x",function(d){return d.x;})
            .attr("y",function(d){return d.y});
    })



});

 /*// var width=400,height=600;
    var svg=d3.select("#forcegraph")
       // .append("svg")
        .attr("width",width)
        .attr("height",height);
    d3.json("ForceGraphData.json", function(error, graph) {
        if (error) throw error;

        var force=d3.layout.force()
            .nodes(graph.nodes)
            .links(graph.links)
            .size([width,height])
            .linkDistance(150)
            .charge(-400);
        force.start();

        console.log(graph.nodes);
        console.log(graph.links);

        var svg_edges=svg.selectAll("line")
            .data(graph.links)
            .enter()
            .append("line")
            .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

        var color=d3.scale.category20();

        var svg_nodes=svg.selectAll("circle")
            .data(graph.nodes)
            .enter()
            .append("circle")
            .attr("r",20)
            .style("fill",function(d,i){
                return color(i);
            })
            .call(force.drag);
        var svg_texts=svg.selectAll("text")
            .data(graph.nodes)
            .enter()
            .append("text")
            .style("fill","black")
            .attr("dx",20)
            .attr("dy",8)
            .text(function(d){
                return d.id;
            });
        force.on("tick",function(){
            svg_edges.attr("x1",function(d){return d.source.x;})
                .attr("y1",function(d){return d.source.y;})
                .attr("x2",function(d){return d.target.x;})
                .attr("y2",function(d){return d.target.y;});
            svg_nodes.attr("cx",function(d){return d.x;})
                .attr("cy",function(d){return d.y;});
            svg_texts.attr("x",function(d){return d.x;})
                .attr("y",function(d){return d.y});
        })



    });*/

效果圖：

D3系列第三彈——繪製力導向圖

關於力導向圖，學習之前要知道，力導向圖是什麼，它的特點是什麼。力引導演算法主要應用與複雜網路視覺化。將物件抽象成圖中的點，有關係的兩點間繪製一條線，從力導向圖，我們可以明顯的知道點之間的親疏關係。使用資料集json檔案： { "nodes": [ { "na

【D3.js資料視覺化系列教程】（三十）--力導向圖之帶文字

(1)連結陣列var links = [ {source: "Microsoft", target: "Amazon", type: "licensing" ,weight:1,color:1}, {source: "Microsoft", target:

d3.js（v5.7）力導向圖（關係圖譜）

先上圖，後面再一一解釋： ok，為了方便理解，這裡我就沒有用之前封裝的automatch函式來將資料和節點匹配了，如果你對enter(),exit()函式還不是很理解的話，請移步至我之前寫的《node與資料匹配》（automatch函式）那麼接下來：一、宣告全域性變數因為力導向圖，涉及到眾多

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

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

vis.js力導向圖第五彈——隱藏節點

正經學徒，佛系記錄，不搞事情基於上文：https://blog.csdn.net/qq_31748587/article/details/84143153 的專案通過複選框動態控制節點的展示（節點隱藏會自動隱藏關係，但節點還是存在於圖中，只是隱藏了）首先隨意建立節點和

老鼠屎地理資訊視覺化第三彈：Plotly+Pyecharts繪製地理座標系線圖

由於最近老鼠屎做的東西和地圖上的線型圖相關，因此在這裡做一點簡單總結。很多地方都除錯得很不理想，希望成功的地方可以給大家帶來一點點啟發，不理想的地方也歡迎大神們賜教。 1 Plotly 1.1 地圖上繪製線有關pyplot的相關在老鼠屎的博文使用plo

D3.js的v5版本入門教程（第十四章）—— 力導向圖

D3.js的v5版本入門教程（第十四章）這一章我們來繪製一個力導向圖，什麼叫力導向圖，通俗一點將就是有節點和線組成，當滑鼠拖拽一個節點時，其他節點都會受到影響（力導向圖有多種型別，本章繪製的效果就是這樣，其他型別的讀者可以自己去試試），還是給讀者提個醒

D3.js的V5版本-Vue框架中使用(第九章) ---力導向圖

一. Api使用 d3.forceSimulation() ，新建一個力導向圖， d3.forceSimulation().force(),新增或者移除一個力 d3.forceSimulation().nodes()，輸入是一個數組，然後將這個輸入的陣列進行一定的資料轉

【D3.js資料視覺化系列教程】（二十四）--力導向圖

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-22-force.html</title> <script type="t

實現HTTPS系列第四彈之【TLS ，SSL等概念理解】

tls pki ssl 博文說明【前言】：本文將通過個人口吻介紹TLS ，SSL，PKI等相關知識，在目前時間點【2017年5月21號】下，所掌握的技術水平有限，可能會存在不少知識理解不夠深入或全面，望大家指出問題共同交流，在後續工作及學習中如發現本文內容與實際情況有所偏差，將會完善該博文

python學習之路——第三彈（作業篇第一題）

image 操作啟動程序代碼 color 鎖定文件文件文件內容數據作業一：編寫登錄接口1.輸入用戶名密碼2.認證成功後顯示歡迎信息3.輸錯三次後鎖定。所需知識點文件基本讀寫操作，循環，列表，字典上面的作業題是在學習完數據類型和簡單的文件操作之後布置的，

Python進階---面向對象第三彈（進階篇）

python對象 one iss pri each super left connect ext 　Python對象中一些方法一、__str__ class Teacher: def __init__(self,name,age): self.name

javascript面向對象系列第三篇——實現繼承的3種形式

編程語言 urn ash yahoo 實現經典 ray obj 學習前面的話　　學習如何創建對象是理解面向對象編程的第一步，第二步是理解繼承。開宗明義，繼承是指在原有對象的基礎上，略作修改，得到一個新的對象。javascript主要包括類式繼承、原型繼承和拷貝繼承這

Python培訓知識總結系列- 第三章 Python3文件操作（一）

readline new socket 總結排序 tin strip() list 是否 open 123456789f = open(‘filename‘,‘r‘) # 讀模式f = open(‘filename‘,‘w‘) # 寫模式f = open(‘filenam

Hulu機器學習問題與解答系列 | 第九彈：循環神經網絡

AD 新的價值 sep tts wiki 今天捕獲 huang 大噶好，今天是有關RNN問題的解答。記得多多思考和轉發，公式供應充足的Hulu機器學習系列，怎麽能只自己知 (shou)道 (nue) ~ 今天的內容是【循環神經網絡】場景描述循環神經網

Hulu機器學習問題與解答系列 | 第六彈：PCA算法

iad 效果其中 struct 並不是系統資源 gic 文章協方差好久不見，Hulu機器學習問題與解答系列又又又更新啦！你可以點擊菜單欄的“機器學習”，回顧本系列前幾期的全部內容，並留言發表你的感悟與想法，說不定會在接下來的文章中看到你的感言噢～今天

jQuery系列第三章 jQuery框架操作CSS

btn script 我們就刪除 () 都沒有多個一個並且第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法，我們通過調用該方法傳遞對應的參數，可以方便的來批量設置標簽的CSS樣式。使用JavaScr

設計與實現分離——面向接口編程（OO博客第三彈）

none @override flag ava 三種 time rri 初學 fault 如果說繼承是面向對象程序設計中承前啟後的特質，那麽接口就是海納百川的體現了。它們都是對數據和行為的抽象，都是對性質和關系的概括。只不過前者是縱向角度，而後者是橫向角度罷了

lavarel從零開始-第三彈（路由，控制器，視圖）

clas space web 傳參 route where ace enter ber routes／web.php寫路由基本路由： Route::get(‘/‘, function () { return view(‘welcome‘);});Route::get

java面試寶典第三彈

返回管理過程網絡臨界資源 hashtable 私有化針對刪除 Http和Https的區別超文本傳輸協議HTTP協議被用於在Web瀏覽器和網站服務器之間傳遞信息，HTTP協議以明文方式發送內容，不提供任何方式的數據加密，如果攻擊者截取了Web瀏覽器和網站服務器之

D3系列第三彈——繪製力導向圖

相關推薦