2. 程式人生 > >d3畫力導向圖

d3畫力導向圖

阿新 • • 發佈：2019-01-23
var width = 600; var height = 600; var svg = d3.select("body") .append("svg") .style("background-color","yellow") .attr("width",width) .attr("height",height) var nodes = [ { name : "0"
}, { name : "1"}, { name : "2"}, { name : "3"}, { name : "4"}, { name : "5"}, { name : "6"}, { name : "7"}, ] 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
},{ source : 1, target : 7 } ] //轉換資料 var force = d3.layout.force() .nodes(nodes) .links(edges) .size([width,height]) .linkDistance(90) .charge(-400); force.start(); console.log(nodes); console.log(edges); // var drag = force.drag() // .on("dragstart",function(d){ // d.fixed = false; // }) // .on("dragend",function(d,i){ // d3.select(this).style("fill",color(i)); // }) // .on("drag",function(d){ // d3.select(this).style("fill","yellow"); // }) //轉換資料 var color = d3.scale.category20(); //繪製連線 var lines = svg.selectAll(".forceLine") .data(edges) .enter() .append("line") .attr("class","forceLine") .attr("stroke","black") //繪製節點 var circles = svg.selectAll(".forceCircle") .data(nodes) .enter() .append("circle") .attr("class","forceCircle") .attr("r",20) .style("fill",function(d,i){ return color(i); }) .call(force.drag); //繪製文字 var texts = svg.selectAll(".forceText") .data(nodes) .enter() .append("text") .attr("class","forceText") .attr("x",function(d){ return d.x; }) .attr("y",function(d){ return d.y; }) .attr("dy",".3em") .text(function(d){ return d.name; }) //tick事件的監聽器 force.on("tick",function(){ //更新連線的端點座標 lines.attr("x1",function(d){ return d.source.x; }) lines.attr("y1",function(d){ return d.source.y; }) lines.attr("x2",function(d){ return d.target.x; }) lines.attr("y2",function(d){ return d.target.y; }) //更新節點座標 circles.attr("cx",function(d){ return d.x; }) circles.attr("cy",function(d){ return d.y; }) //更新文位元組點座標 texts.attr("x",function(d){ return d.x; }) texts.attr("y",function(d){ return d.y; }) })

相關推薦

d3畫力導向圖

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

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

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

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

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

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學習：力導向圖佈局

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

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

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

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

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

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

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(

關於力導向圖

今天自己寫了一個力導向圖，也算花了大半天時間才搞定細節東西。修改了一些bug，如下： 1、只出現一個點，因為function(d){return d.target.id;})沒有定義id屬性，所以只出現一個。 2、attr("class","node")，寫錯：attr("

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

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

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

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