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

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

阿新 • • 發佈：2019-01-16
var width = 900; var height = 800; var img_w = 77; var img_h = 80; var radius = 30; //圓形半徑 var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height); d3.json("relation.json"
,function(error,root){ if( error ){ return console.log(error); } console.log(root); //D3力導向佈局 var force = d3.layout.force() .nodes(root.nodes) .links(root.edges) .size([width,height]) .linkDistance(200
) .charge(-1500) .start(); //邊 var edges_line = svg.selectAll("line") .data(root.edges) .enter() .append("line") .style("stroke"
,"#ccc") .style("stroke-width",1); //邊上的文字（人物之間的關係） var edges_text = svg.selectAll(".linetext") .data(root.edges) .enter() .append("text") .attr("class","linetext") .text(function(d){ return d.relation; }); // 圓形圖片節點（人物頭像） var nodes_img = svg.selectAll("image") .data(root.nodes) .enter() .append("circle") .attr("class", "circleImg") .attr("r", radius) .attr("fill", function(d, i){ //建立圓形圖片 var defs = svg.append("defs").attr("id", "imgdefs") var catpattern = defs.append("pattern") .attr("id", "catpattern" + i) .attr("height", 1) .attr("width", 1) catpattern.append("image") .attr("x", - (img_w / 2 - radius)) .attr("y", - (img_h / 2 - radius)) .attr("width", img_w) .attr("height", img_h) .attr("xlink:href", d.image) return "url(#catpattern" + i + ")"; }) .on("mouseover",function(d,i){ //顯示連線線上的文字 edges_text.style("fill-opacity",function(edge){ if( edge.source === d || edge.target === d ){ return 1.0; } }); }) .on("mouseout",function(d,i){ //隱去連線線上的文字 edges_text.style("fill-opacity",function(edge){ if( edge.source === d || edge.target === d ){ return 0.0; } }); }) .call(force.drag); var text_dx = -20; var text_dy = 20; var nodes_text = svg.selectAll(".nodetext") .data(root.nodes) .enter() .append("text") .attr("class","nodetext") .attr("dx",text_dx) .attr("dy",text_dy) .text(function(d){ return d.name; }); force.on("tick", function(){ //限制結點的邊界 root.nodes.forEach(function(d,i){ d.x = d.x - img_w/2 < 0 ? img_w/2 : d.x ; d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ; d.y = d.y - img_h/2 < 0 ? img_h/2 : d.y ; d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ; }); //更新連線線的位置 edges_line.attr("x1",function(d){ return d.source.x; }); edges_line.attr("y1",function(d){ return d.source.y; }); edges_line.attr("x2",function(d){ return d.target.x; }); edges_line.attr("y2",function(d){ return d.target.y; }); //更新連線線上文字的位置 edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; }); edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; }); //更新結點圖片和文字 nodes_img.attr("cx",function(d){ return d.x }); nodes_img.attr("cy",function(d){ return d.y }); nodes_text.attr("x",function(d){ return d.x }); nodes_text.attr("y",function(d){ return d.y + img_w/2; }); }); });

相關推薦

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

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

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

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

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

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

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

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

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

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

【D3.js】D3是什麼

D3是什麼 D3 的全稱是 Data-Driven Document，可以理解為：由資料來決定繪圖流程的程式設計模型。 D3 是一個JavaScript的函式庫，是用來做資料視覺化的。 將資料變成圖形，要想用原生的 HTML、SVG、Canvas 來實現是

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

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

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

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

【 D3.js 入門系列 --- 9.4 】 集群圖的制作

all users bject nodes -- 部分 函數 選擇 water 本人的個人博客為： www.ourd3js.com csdn博客為： blog.csdn.net/lzhlzz 轉載請註明出處，謝謝。

【d3.js實踐教程特別篇】PornHub釋出基於d3的網民觀看成人視訊時長分佈互動式地圖

學習d3.js（以下都簡稱d3）也有一段時間了，執行d3做了幾個專案。我發現中文的d3教程很少，國外資料多但要求有一定的英文閱讀能力（推薦網址：http://bl.ocks.org/mbostock），於是就萌發了寫一個d3實際運用系列文章的想法，現在開始付之行動。在系列

【 D3.js 高階系列 — 5.0 】 顏色

顏色是作圖不可少的概念，常用的標準有 RGB 和 HSL，D3 提供了建立顏色物件的方法，能夠相互轉換和插值。RGB色彩模式是通過對紅（Red）、綠（Green）、藍（Blue）三個顏色通道相互疊加來得到各式各樣的顏色。三個通道的值的範圍都為0~255，因此總共能表示1677

【 D3.js 入門系列 — 6 】 讓圖表動起來

1. 什麼是動態效果 前面幾章製作的圖表是一蹴而就地出現，然後繪製完成後不再發生變化的，這是靜態的圖表。 動態的圖表，是指圖表在某一時間段會發生某種變化，可能是形狀、顏色、位置等，而且使用者是可以看到變化的過程的。 例如，有一個圓，圓心為 (100, 100)。現在我們希

【 D3.js 入門系列 --- 7 】 理解 update, enter, exit 的使用

    轉載請註明出處，謝謝。     在前面幾節中反覆出現瞭如下程式碼： svg.selectAll("rect") .data(dataset) .enter() .append("r

【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 進階系列 — 4.0 】 繪製箭頭

在 SVG 繪製區域中作圖，在繪製直線和曲線時，常需要在某處新增箭頭。本文介紹如何在 D3 中給直線和曲線新增箭頭。 到目前為止，我們繪製 D3 的圖表都是在 SVG 繪製區域內，雖然 D3 也可用 Canvas 或 WebGL 等作圖，但 SVG 是最常用的。那麼，用 D3

【 D3.js 入門系列 --- 3 】 做一個簡單的圖表！

    轉載請註明出處，謝謝。     前面說了幾節，都是對文字進行處理，這一節中將用 D3.js 做一個簡單的柱形圖。     做柱形圖有很多種方法，比如用 HTML 的 div 標籤，或用 svg 。     推薦用 SVG 來做各種圖形。SVG 意為可縮放

【 D3.js 入門系列 --- 9.6 】 打包圖的製作

    轉載請註明出處，謝謝。     打包圖（ Pack ），用於包含與被包含的關係，也表示各個物件的權重，通常用一圓套一圓來表示前者，用圓的大小來表示後者。     這是各城市所屬關係的資料。我們現在要用 D3 的 layout 來轉換資料，使其容易進行視覺化處理

【 D3.js 進階系列 — 2.1 】 力學圖的事件 + 頂點的固定

本章討論在力學圖中常用到的事件（ Event ），然後對【進階 - 第 2.0 章】的人物關係圖進行改進，使使用者能夠固定拖拽的物件。 force.on("tick", function(){ });這裡的 force 是之前程式碼中定義的佈局（ Layout ）

D3學習：力導向圖佈局

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

【 D3.js 進階系列 — 1.0 】 CSV 表格檔案的讀取

在入門系列的教程中，我們常用 d3.json() 函式來讀取 json 格式的檔案。json 格式很強大，但對於普通使用者可能不太適合，普通使用者更喜歡的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格檔案，因為簡單易懂，容易編輯。