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

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

阿新 • • 發佈：2019-02-17 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testD3-22-force.html</title>
    <script type="text/javascript" src="d3.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<script type="text/javascript"
 
>
var h=300;
var w=300;
// 顏色函式
var colors=d3.scale.category20()//建立序數比例尺和包括20中顏色的輸出範圍

//(1)定義節點和聯絡物件陣列
var dataset={
    nodes:[//節點
        { name:"Adam"},
        { name:"Bob"},
        { name:"Carride"},
        { name:"Donovan"},
        { name:"Edward"},
        { name:"Felicity"},
        { name:"George"
 
},
        { name:"Hannah"},
        { name:"Iris"},
        { name:"Jerry"} 
    ],
    edges:[//邊
        { source:0,target:1,weight:1,color:1},
        { source:0,target:2,weight:3,color:4},
        { source:0,target:3,weight:4,color:6},
        { source:0,target:4,weight:6,color:65},
        { source:
 
1,target:5,weight:3,color:76},
        { source:2,target:5,weight:8,color:879},
        { source:2,target:5,weight:7,color:989},
        { source:3,target:4,weight:9,color:643},
        { source:5,target:8,weight:1,color:54},
        { source:5,target:9,weight:3,color:54}, 
        { source:6,target:7,weight:4,color:45},
        { source:7,target:8,weight:0,color:43},
        { source:2,target:8,weight:8,color:243},
        { source:3,target:8,weight:1,color:43},
        { source:5,target:8,weight:5,color:13},
        { source:6,target:8,weight:3,color:351},
        { source:8,target:9,weight:4,color:1}
    ]
};

//(2)轉化資料為適合生成力導向圖的物件陣列
var force=d3.layout.force()
    .nodes(dataset.nodes)//載入節點資料
    .links(dataset.edges)//載入邊資料
    .size([w,h])//設定有效空間的大小
    .linkDistance(50)//連線的長度
    .charge(-200)//負電荷量，相互排斥設定的負值越大越排斥
    .start();//設定生效

var svg=d3.select("body")
    .append("svg")
    .attr("width",w)
    .attr("height",h);

//(3)建立作為連線的svg直線
var edges=svg.selectAll("line")
    .data(dataset.edges)
    .enter()
    .append("line")
    .style("stroke",function(d){//  設定線的顏色
        return colors(d.color);
    })
    .style("stroke-width",function(d,i){//設定線的寬度
        return d.weight;
    });

//(4) 建立作為連線的svg圓形
var nodes=svg.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")
    .attr("r",function(d){//設定圓點的半徑，圓點的度越大weight屬性值越大，可以對其做一點數學變換
        return Math.log(d.weight)*10;
    })
    .style("fill",function(d){
        return colors(d.weight*d.weight*d.weight);
    })
    .call(force.drag);//可以拖動

 //(5)打點更新，沒有的話就顯示不出來了
force.on("tick",function(){
    //邊
    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;
    });

    //節點
    nodes.attr("cx",function(d){
        return d.x;
    })
    .attr("cy",function(d){
        return d.y;
    });

})
</script>

</body>
</html>

相關推薦

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

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

【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

csv檔案由csv資料生成的圓環!  1. 載入csv資料用到d3.csv函式，第一個引數是地址，第二個引數是個回撥函式d3.csv("http://localhost:8080/spring/D3da

【D3.js資料視覺化系列教程】（二十二）--互動圖表之提示條

//鍵值對資料集 var dataset = [ {key:0,value:5}, {key:1,value:10}, {key:2,value:13}, {key:3,value:19}, {key:4,value:21}, {key:5,value:25}, {key:6,value:22}, {ke

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

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

【D3.js資料視覺化系列教程】--（二）最簡單的開始：新增元素

1. 新增元素語法：[selection].append("p"); 2. 怎麼做？將D3.js解壓到桌面，同時在桌面建立一個index.html<html> <head>

【D3.js資料視覺化系列教程】（十六）--更新、過度和動畫

//(1) 準備資料集 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //(2) 設定SVG的高寬 var w=600; va

【D3.js資料視覺化系列教程】（十八）--組合新增刪除

//鍵值對資料集 var dataset = [ {key:0,value:5}, {key:1,value:10}, {key:2,value:13}, {key:3,value:19}, {key:4,value:21}, {key:5,value:25}, {key:6,value:22}, {ke

【D3.JS資料視覺化實戰記錄】繪製動態狀態變化趨勢圖

參考d3js.org的Health&Wealth例項（http://bost.ocks.org/mike/nations/）按照時間展示節點狀態變化。 需要展示的json: [{"calendar":"2012-01-01 12:00:00", "value

【D3.js資料視覺化實戰】--（2）本地時間軸

背景需求 繪製效果 實現思路 關鍵技術 完整程式碼 背景需求 使用D3繪製圖表一般都會繪製一個座標軸，但是用D3畫過圖的同學都知道預設情況下繪製的座標軸刻度是英文的。但是我們要

Vue.js框架--Ui框架的Element UI（二十四）

主要操作技能：    1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart      2>安裝:  cnpm i element-u

一.d3.js 資料視覺化

轉載 http://blog.csdn.net/tianxuzhang/article/details/11317667 d3 是什麼？ D3 (或D3.js) 是一個用來使用Web標準做資料視覺化的JavaScript庫。 D3幫助我們使用SVG, Canvas

資料視覺化 三步走（二）：springboot整合mybatis 搭建Java Web

前言     本章節完成第2點：利用springboot + mybatis 作為web後臺服務。 1.環境依賴   1.Win7 + Intellij IDEA 15.0.2 + JDK8 2.建立springboot專案  

資料視覺化-svg入門基礎（二）

接上一篇：資料視覺化-svg入門基礎（一），基礎一主要是介紹了svg概念，元素樣式設定等。 svg是（scalable vector graphic）伸縮向量影象。 一、目錄 （1）圖形元素 （2）文字元素 （3）特殊元素 （4）濾鏡元素 （5）漸變元素   二、圖形元素 1、矩

Docker最全教程之MySQL容器化 （二十四）

前言                 MySQL是目前最流行的開源的關係型資料庫，MySQL的容器化之前有朋友投稿並且寫過此塊，本篇僅從筆者角度進行總結和編寫。   目錄 &nbs

Android開發系列（二十四）：Notification的功能與使用方法

font _id when ice extends 開發 content androi mark 關於消息的提示有兩種：一種是Toast，一種就是Notification。前者維持的時間比較短暫，後者維持的時間比較長。 並且我們尋常手機的應用比方網易、貼吧等等都有非常多

大資料（二十四）：資料傾斜優化、並行執行、嚴格模式、JVM重用、執行計劃

一、資料傾斜優化 1.合理設定Map數量        1.通常情況下，作業會通過input的目錄產生一個或者多個map任務        主要的決定因素有：input的檔案總個數，input的檔案大小，叢集

JavaFX UI控制元件教程（二十四）之Password Field

翻譯自  Password Field 在本章中，您將瞭解另一種型別的文字控制元件，即密碼欄位。 本PasswordField類實現一個專門的文字欄位。通過顯示回顯字串來隱藏使用者鍵入的字元。圖23-1顯示了一個密碼欄位，其中包含提示訊息。 圖23-1帶有提示訊

Spring Cloud系列（二十四） 路由詳解（Finchley.RC2版本）

傳統路由配置 傳統路由配置就是不需要依賴服務發現機制，通過在配置檔案中具體指定每個路由表示式與服務例項的對映關係來實現API閘道器對外請求的路由。 單例項配置 通過zuul.routes.<route>.path與zuul.routes.<route&

Python小白學習之路（二十四）—【裝飾器】

裝飾器 一、裝飾器的本質 裝飾器的本質就是函式，功能就是為其他函式新增附加功能。 利用裝飾器給其他函式新增附加功能時的原則：         1.不能修改被修飾函式的原始碼        2.不能修改被修飾函式的呼叫方式

小白的資料結構與演算法學習筆記（二十六）----廣義表

 一、廣義表的概述 首先回憶一下原子型別和結構型別，簡單說來，原子型別就是不可再分的型別，結構型別就是可以再分的型別。我們前面講的線性表要求每個元素都是原子型別，而廣義表作為線性表的推廣，它的元素可以是原子型別，也可以是個表。元素是原子型別，叫原子結點；元素是表，叫表結點。