當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

D3.js系列——布局：打包图和地图

發(fā)布時間：2024/4/15 编程问答 79 豆豆

生活随笔收集整理的這篇文章主要介紹了 D3.js系列——布局：打包图和地图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、打包圖

　　打包圖（ Pack ），用于表示包含與被包含的關(guān)系，也可表示各對象的權(quán)重，通常用一圓套一圓來表示前者，用圓的大小來表示后者。

1、布局（數(shù)據(jù)轉(zhuǎn)換）

var pack = d3.layout.pack().size([ width, height ]).radius(20);

　　第 1 行：打包圖的布局
　　第 2 行：size() 設(shè)定轉(zhuǎn)換的范圍，即轉(zhuǎn)換后頂點的坐標(biāo)(x,y)，都會在此范圍內(nèi)。
　　第 3 行：radius() 設(shè)定轉(zhuǎn)換后最小的圓的半徑。

　　讀取數(shù)據(jù)并轉(zhuǎn)換的代碼

d3.json("city2.json", function(error, root) {var nodes = pack.nodes(root);var links = pack.links(nodes);console.log(nodes);console.log(links); }

　　上面用 pack 函數(shù)分別將數(shù)據(jù)轉(zhuǎn)換成了頂點 nodes 和連線 links。來看看頂點數(shù)據(jù)被轉(zhuǎn)換成了什么樣：

　　數(shù)據(jù)被轉(zhuǎn)換后，多了深度信息(depth)，半徑大小(r)，坐標(biāo)位置(x,y)等。打包圖無需對連線進行繪制。

　　注意：無論用什么 Layout 來轉(zhuǎn)換數(shù)據(jù)，一定要先看轉(zhuǎn)換后的數(shù)據(jù)是什么再繪制，否則很容易出錯。

2、繪制

　　繪制的內(nèi)容有圓和文字，都在 SVG 中繪制。實例代碼如下：

<!DOCTYPE html> <html lang="en"> <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>vue生命周期學(xué)習(xí)</title><script src="d3.min.js"></script> </head> <body> </body> <script> //準(zhǔn)備畫布 var width=500,height=500; var svg = d3.select("body").append("svg").attr("width",width).attr("height",height); //布局 var pack = d3.layout.pack().size([width,height]).radius(20); //讀取數(shù)據(jù)并轉(zhuǎn)換數(shù)據(jù) d3.json('city2.json',function(error,root){var nodes = pack.nodes(root);var links = pack.links(nodes);console.log(nodes,links);//畫圓svg.selectAll("circle").data(nodes).enter().append("circle").attr("fill","rgb(31, 119, 180)").attr("fill-opacity","0.4").attr("cx",function(d){return d.x;}).attr("cy",function(d){return d.y;}).attr("r",function(d){return d.r;}).on("mouseover",function(d,i){d3.select(this).attr("fill","yellow")}).on("mouseout",function(d,i){d3.select(this).attr("fill","rgb(31, 119, 180)");});//給文本svg.selectAll("text").data(nodes).enter().append("text").attr("font-size","10px").attr("fill","white").attr("fill-opacity",function(d){if(d.depth == 2)return "0.9";elsereturn "0";}).attr("x",function(d){ return d.x; }).attr("y",function(d){ return d.y; }).attr("dx",-12).attr("dy",1).text(function(d){ return d.name; }); }) </script> </html>

二、地圖

　　在數(shù)據(jù)可視化中，地圖是很重要的一部分。很多情況會與地圖有關(guān)聯(lián)，如中國各省的人口多少，GDP多少等，都可以和地圖聯(lián)系在一起。

　　將 JSON 的格式應(yīng)用于地理上的文件，叫做 GeoJSON 文件。本文就是用這種文件繪制地圖。

1、投影函數(shù)

var projection = d3.geo.mercator().center([107, 31]).scale(850).translate([width/2, height/2]);

　　由于 GeoJSON 文件中的地圖數(shù)據(jù)，都是經(jīng)度和緯度的信息。它們都是三維的，而要在網(wǎng)頁上顯示的是二維的，所以要設(shè)定一個投影函數(shù)來轉(zhuǎn)換經(jīng)度緯度。如上所示，使用 d3.geo.mercator() 的投影方式。

　　第 2 行：center() 設(shè)定地圖的中心位置，[107,31] 指的是經(jīng)度和緯度。
　　第 3 行：scale() 設(shè)定放大的比例。
　　第 4 行：translate() 設(shè)定平移。

2、地理路徑生成器

　　為了根據(jù)地圖的地理數(shù)據(jù)生成 SVG 中 path 元素的路徑值，需要用到 d3.geo.path()，我稱它為地理路徑生成器

var path = d3.geo.path().projection(projection);

　　projection() 是設(shè)定生成器的投影函數(shù)，把上面定義的投影傳入即可。以后，當(dāng)使用此生成器計算路徑時，會自己加入投影的影響。

3、向服務(wù)器請求文件并繪制地圖

<html> <head> <meta charset="utf-8"> <title>中國地圖</title> </head> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script>var width = 1000;var height = 1000;var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(0,0)");var projection = d3.geo.mercator().center([107, 31]).scale(850).translate([width/2, height/2]);var path = d3.geo.path().projection(projection);var color = d3.scale.category20();d3.json("china.geojson", function(error, root) {if (error) return console.error(error);console.log(root.features);svg.selectAll("path").data( root.features ).enter().append("path").attr("stroke","#000").attr("stroke-width",1).attr("fill", function(d,i){return color(i);}).attr("d", path ).on("mouseover",function(d,i){d3.select(this).attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this).attr("fill",color(i));});}); </script> </body> </html>

　　再次聲明：d3.json() 不能直接讀取本地文件，因此你需要搭建一個服務(wù)器，例如 Apache。但是在火狐瀏覽器是可以直接讀取的。

　　接下來，就是給 svg 中添加 path 元素。本例中，每一個 path 表示一個省。要注意 attr(“d”,path) 這一行代碼，它相當(dāng)于：

.attr("d",funtion(d){return path(d); })

轉(zhuǎn)載于:https://www.cnblogs.com/goloving/p/8618825.html

超強干貨來襲云風(fēng)專訪：近40年碼齡，通宵達旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的D3.js系列——布局：打包图和地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。