D3.js建立力導向圖(V4)附帶詳細的引數說明

阿新 • • 發佈：2018-12-18

一.程式碼示例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D3 test</title>
</head>

< 
body>
    <div class="container">
        <div id="graph"></div>
    </div>
</body>

</html>
<script src="/static/js/d3-v4.js"></script>
<script>

    var nodes = [ { name: "桂林" }, { name: "廣州" },
              { name: "廈門" }, { name: "杭州" },
              { 
 name: "上海" }, { name: "青島" },
              { name: "天津" } ];

    var links = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
               { source : 0 , target: 3 } , { source : 1 , target: 4 } ,
               { source : 1 , target: 5 } , { source : 1 , target: 6 } ];

    var width = 
 800;
    var height = 600;
    var svg = d3.select("#graph")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(d3.zoom() //建立縮放行為
            .scaleExtent([-5, 2])
            .on('zoom',zoom_actions)); //設定縮放範圍
        
   


    //初始化力學模擬器，通過佈局函式格式化資料    
    var simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).distance(100))   //distance設定連線距離
        .force("charge", d3.forceManyBody().strength(-100))  //注1> 
        .force("center", d3.forceCenter(width / 2, height / 2))  //設定力學模擬器的中心
        .on("tick", ticked);  
	
	//佈局函式格式化後的資料，注2>
	console.log('nodes', nodes);
    console.log('links', links);  
    
    var color = d3.scaleOrdinal(d3.schemeCategory20);  //生成顏色選擇器函式，此函式返回顏色陣列 (string [])
    
     //新增group包裹svg元素以進行縮放，目的是在縮放時不會影響整個容器的位置
    var g = svg.append("g")
    .attr("class", "everything");

    // 繪製連線
    var svg_links = g.append('g')
        .selectAll("line")
        .data(links)
        .enter()
        .append("line")
        .style("stroke", "#ccc")
        .style("stroke-width", 3)
        

    // 繪製節點    
    var svg_nodes = g.append('g')
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("r", '20')
        .style("fill", function (d, i) {
            return color(i);
        }).call(d3.drag().on("start", dragstarted) //d3.drag() 建立一個拖曳行為
          .on("drag", dragged)
          .on("end", dragended));
   
    //繪製描述節點的文字
    var svg_texts =  g.append('g')
        .selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .style("fill", "black")
        .attr("dx", 20)
        .attr("dy", 8)
        .text(function (d) {
            return d.name;
        });

    //監聽拖拽開始    
    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //alpha是動畫的冷卻係數，運動過程中會不斷減小，直到小於0.005為止，此時動畫會停止。
        d.fx = d.x;    //fx為固定座標，x為初始座標  注3>  
        d.fy = d.y;
    }

    //監聽拖拽中  
    function dragged(d) {
        d.fx = d3.event.x;  //fevent.x為拖拽移動時的座標
        d.fy = d3.event.y;
    }

    //監聽拖拽結束
    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;        //固定座標清空
        d.fy = null;
    }

    function zoom_actions() { 
        g.attr("transform", d3.event.transform)
     }

    //拖拽時的事件監聽器  以實時更新座標
    function ticked() {
        svg_links.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;
            });
    }

</script>

二.註釋詳解

相關函式的說明在程式碼的註釋中已經寫的很清楚了，下面我針對以上註釋中的注1>,2>,3>做一些詳細的解釋。

1> forceManyBody()函式為建立多體力函式，strength為相互作用力，正的為吸力，負的為斥力，何為多體力？你可以把它理解成是一個建立作用力,設定作用力閾值和計算作用力大小的高階函式

這是github上D3.js對於forceManyBody()的解釋。

在這裡插入圖片描述

簡單來說，就是此函式可以建立一個帶參的多體力物件，此物件中有一些函式，咱們可以呼叫，具體有如下幾個函式：

在這裡插入圖片描述 strength,distanceMin和distanceMax都是字面意思，無需多說，我稍微解釋下theta函式。

我先放上github官網上對於此manyBody.theta()函式的解釋。在這裡插入圖片描述什麼意思呢?簡單來說，就是這個函式用來計算你每個節點所受到的其他所有節點的合力的近似值，而theta函式就是用來設定此近似值的精度，官方給了一個預設值是0.9。

我們可以看到，這個函式依賴的是Barnes-Hut演算法，那麼何為Barnes-Hut?

Barnes-Hut演算法是一種用於實現N體問題（n-body）模擬的近似演算法。

以下是維基百科的解釋：在這裡插入圖片描述上面那一堆東西就是說，這個演算法是從節點的根資料開始遞迴，並遵循一定的原則，最終計算出合力。具體規則如下：

1.如果當前節點是一個外部節點（而且它不是物體bb），計算當前節點施加在物體bb上的力，並將其加到bb的合力上。 2.計算商s/ds/d的值。如果s/d<θs/d<θ，將這個內部節點看成一個單獨的物體 3.計算其施加在物體bb上的力，並將其加到bb的合力上。否則，在當前節點的每個孩子節點上遞迴地執行上述步驟。

三.參考文章

D3.js建立力導向圖(V4)附帶詳細的引數說明

一.程式碼示例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport"

資料視覺化 D3.js實現力導向圖之二（node帶文字說明和提示）

從官方下載下的demo，直接加text帶文字，始終未能顯示出來，但是title卻能顯示出來，最後經過與網上其他地方做出來的例子用firebug進行跟蹤對比，發現能夠正確顯示title的html裡邊g標籤為node裡邊包含circle和text(circle、title和te

利用Javascript框架——D3.js製作力導向關係圖普

因公司業務需求，整理製作了一個實用且酷炫力導向關係圖。下面是我自己的一個demo。先Po一下成品圖（自己做的資料偏少）：圖1： 1)、引入D3框架，這裡引入的版本是v3.0 圖2： 2)、資料整理（資料結構如下圖）圖3：圖3：

【D3.js】力導向佈局 + 圓形圖片展示的人物關係

var width = 900; var height = 800; var img_w = 77; var img_h = 80; var radius = 30; //圓形半徑

D3學習：力導向圖佈局

var nodes = [{name:"盤錦"}, {name:"北票"}, {name:"錦州"}, {name:"瀋陽"},

d3.js多重力導向圖多條關係線，mouseover只顯示相關節點

直接上效果圖滑鼠移至節點不相連節點變暗程式碼如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="http://d3js.org/d3.v3.mi

Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】

前段時間因為參與專案涉密，所以一直沒有更新部落格，有些博友給我私信或者留言要部分博文的原始碼，因為我的電腦更換，demo的原始碼沒有備份所以無法提供。大家可針對具體問題問我，有空我定會回覆的。另外轉發文章請說明出處，謝謝關注！之前有多篇博文介紹了d3力導向圖的繪製過程的一些問題，現在由於效能和UI的要求，

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

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

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

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

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

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

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

d3js V4 力導向圖

less select urn art href lac 進行 ati man 參考饅頭華華：http://d3.decembercafe.org/pages/lessons/14.html 與 tengxing007 :http://blog.csdn.net/t

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

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

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

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

vis.js力導向圖第一彈——基本展示

正經學徒，佛系記錄，不搞事情一、什麼是vis.js 力導向圖（Force-Directed Graph），是繪圖的一種演算法。在二維或三維空間裡配置節點，節點之間用線連線，稱為連線。各連線的長度幾乎相等，且儘可能不相交。節點和連線都被施加了力的作用，力是根據節點和連

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

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

d3畫力導向圖

var width = 600; var height = 600; var svg = d3.select("body") .append("svg") .style("back

d3.js——給柱形圖添加事件出現的問題總結

htm 代碼 lac ring tle log 顏色 out edge 首先做出一個動態的柱形圖（這兒用的d3.js的版本是v3，用v4的話有些函數會發生變化）效果圖：代碼： <!DOCTYPE html> <html lang="en">

echarts力導向圖節點與節點間連線怎麼加上方向箭頭

echarts力導向圖節點與節點間連線怎麼加上方向箭頭實現效果：實現程式碼：

D3.js建立力導向圖(V4)附帶詳細的引數說明

一.程式碼示例

二.註釋詳解

三.參考文章

相關推薦