2. 程式人生 > >D3學習：力導向圖佈局

D3學習：力導向圖佈局

阿新 • • 發佈：2019-01-24
var nodes = [{name:"盤錦"}, {name:"北票"}, {name:"錦州"}, {name:"瀋陽"}, {name:"大連"}, {name:"廈門"}, {name:"北京"}]; var edges = [{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 = 400, height = 400; var svg = d3.select("body") .append("svg") .attr("width"
, width) .attr("height", height); var force = d3.layout.force() .nodes(nodes) .links(edges) .size([width,height]) .linkDistance(150)//指定連線長度 .charge([-300]);//指定相互之間的作用力
//負電荷數 //上面的語句定義了力佈局方式 //並用力佈局的方式使得原始資料變成了畫力導向圖 //所需要的資料格式 force.start();//開始作用力 console.log(nodes); console.log(edges); //看控制檯輸出的資料，已經發生了變化 var color = d3.scale.category20(); //新增節點 var svg_nodes = svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r", 20) .attr("fill", function (d, i) {return color(i);}) .call(force.drag); //call使得節點能夠被拖拽 //新增連線 var svg_edges = svg.selectAll("line") .data(edges) .enter() .append("line") .attr("stroke","#ccc") .attr("stroke-width",1); //新增文字 var svg_texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .attr("fill","orange") .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;}); }) //tick：滴答滴答，滑鼠觸發事件

相關推薦

D3學習：力導向圖佈局

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

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

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

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

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

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

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

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

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系列第三彈——繪製力導向圖

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

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

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

d3畫力導向圖

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

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

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

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

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

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

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

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

【資料視覺化】可放縮可拖拽畫布的力導向圖

效果： 拖拽並縮小後： 1、確認主次 以力導向圖為藍本 2、增加縮放控制變數 var transform = d3.zoomIdentity; 3、響應放縮事件 d3.select(canvas) .call(

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

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