【D3.js學習總結】22、D3幾何-泰森多邊形
d3.geom.voronoi()
在日常生活中有這樣的場景,在一個城市中有很多的便利店,當你走在城市的任意地方,怎麼才能找到離你了近的便利店呢?這種場景就適合用泰森多邊形來解決。
通過一個示例來展示。
1、資料
var dataset = [[18,162], [114,403], [261,98] ]; //假設這是三家便利店
2、資料轉換
var width = 500;
var height = 500;
var voronoi = d3.geom.voronoi()
.clipExtent([[0, 0], [width, height]]);//從畫面左上角到右下角為顯示區間
var data = voronoi(dataset);
轉換後的資料如圖所示。
通過轉換,將資料變成折線圖的每個頂點座標,這樣我們就可以通過將頂點連線起來組成一個個不規則區域;
3、繪製圖形
生成SVG容器
var svg = d3.select(`body`).append(`svg`)
.attr(`width`,width)
.attr(`height`,height)
顏色比例尺
var color = d3.scale.category10();
生成折線路徑
svg.append("g").selectAll("path")
.data(data)
.enter()
.append("path")
.attr(`fill`,function(d,i){
return color(i);
})
.attr("d", function(d,i){
// 通過d.join("L")方法將每個頂點連線起來
return "M" + d.join("L") + "Z";
});
生成便利店位置
svg.append(`g`).selectAll(`circle`)
.data(dataset)
.enter()
.append(`circle`)
.attr(`cx`, function(d,i){
return d[0];
})
.attr(`cy`, function(d,i){
return d[1];
})
.attr(`r`, 5)
.attr(`fill`,`#fff`)
注意在生成便利店位置時,我們用的資料是原始的資料;
相關文章
- 【D3.js學習總結】23、D3幾何-四叉樹JS
- 【計算幾何】多邊形交集
- 【D3.js學習總結】4、D3建立SVGJSSVG
- 【D3.js學習總結】6、D3比例尺JS
- 【計算幾何】多邊形點集排序排序
- 【IDL】 自動構建泰森多邊形(Voronoi Polygon)Go
- 【D3.js學習總結】26、D3地理地圖JS地圖
- 【D3.js學習總結】16、D3佈局-矩陣圖JS矩陣
- 【D3.js學習總結】12、D3佈局-叢集圖JS
- 【計算幾何】點在多邊形內部
- 【計算幾何】點定位(線段,三角形,多邊形)
- [幾何]計算不規則多邊形的面積、中心、重心
- 第九章第九題(幾何:正多邊形)(Geometry: regular polygons)Go
- 視覺化學習:利用向量判斷多邊形邊界視覺化
- 【總結】計算幾何模板
- OpenGL 學習 05 花托(剔除 深度測試 多邊形模式)模式
- OpenGL 學習 06 多邊形偏移 裁剪 混合 抗鋸齒
- 分形——自然界的幾何學 (轉)
- POJ 1408-Fishnet(計算幾何-根據交點求多邊形面積)
- opencv多邊形逼近OpenCV
- SVG <polygon> 多邊形SVGGo
- 多邊形填充-活動邊表法
- 【學習筆記】計算幾何筆記
- matlab練習程式(構造簡單多邊形)Matlab
- matlab練習程式(多邊形頂點凹凸性)Matlab
- 深度學習和幾何(演講提要)深度學習
- 微分幾何學習(一)(向量函式)函式
- [學習筆記] 邊學教程邊建“知識付費”應用 第1次總結筆記
- [CSS LEARN]Border與多邊形CSS
- 【JAVA】多邊形重心計算Java
- Facebook 面試題 | 凸多邊形面試題
- 計算機圖形學(四)_幾何變換_1_基本的二維幾何變換(一)計算機
- CSS繪製各種幾何圖形形狀效果CSS
- 學習總結
- CSS繪製各種幾何形狀CSS
- WebGL不同幾何圖形的渲染方式Web
- matlab繪製正多邊形Matlab
- HexMap學習筆記(一)——建立六邊形網格筆記